深入解析vue的生命周期

2019-08-15 admin

一.vue生命周期的解析

1>什么是vue生命周期

每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。详细来说,就是Vue实例从开始创建,初始化数据,编译模板,挂在dom->渲染,更新->渲染,卸载等一系列过程,我们称这是vue的生命周期,各个阶段有相对应的事件钩子。

2>vue生命周期都有哪些,对应的钩子函数可以做什么

首先,Vue官网的生命周期的图很清楚明了的表明有哪些钩子函数,然后我们对应每个钩子函数详细讲解一下。

clipboard.png

实例化vue对象

  • (2)init events 和 init cycle

初始化事件和生命周期

在实例初始化之后,this指向创建的实例,不能访问到data,computed,watch,methods上的方法和数据。此时,vue组件对象被创建,但是vue对象的属性还没有绑定,即没有值。也就是说,在beforeCreate函数,是在实例初始化之后,数据观测和event/watcher事件配置之前被调用。

  beforeCreate() {
    console.log('创建前-挂在', this.$el)
    console.log('创建前-data', this.$data)
  },

打印结果:

clipboard.png

实践场景–常用于初始化非响应式变量

  • (4)init injections & reactivity

挂在数据(属性赋值),包括属性和computed的运算.在beforeCreated和created两个钩子函数之间发生。

clipboard.png 打印结果:

clipboard.png

通过打印结果,发现计算属性的值在beforeCreated钩子函数中拿不到,在created钩子函数中拿得到,说明计算属性是在beforeCreated和created这两个钩子函数之间进行处理赋值的。

实例创建完成,在created钩子函数这个时期,我们能够访问到data,computed,methods上的方法和数据,但是,这会还没有挂在dom。不能访问到$el,$ref属性内容未空数组。

  created() {
    console.log('创建时--el', this.$el)
    console.log('创建时--data', this.message)
    console.log('创建时-computed', this.a)
    console.log('创建时--methods', this.onClick())
  }

结果:

clipboard.png

实战场景–常用于简单的axios请求,页面的初始化。

clipboard.png

接下来判断对象上是否有el选项,如果有的话,就继续向下编译,如果没有el选项,就停止编译,也就意味着停止了生命周期。等到手动绑定调用vm.$mount()完成全局变量$el的绑定。 如果对象有el选项之后,判断是否有template项,如果有template模板,则将其作为编译模板编译成render函数。如果没有template模板,则将外部的HTML作为模板编译,因此,可以看出,template中的模板优先级高于outer HTML 的优先级。如果有render函数,则会替换template 因此:优先级关系:render>template>out html

在挂载开始之前被调用,beforeMount之前,会找到对应的template,并编译成render函数。 此时,this.$el上有值,但是数据还没挂载到页面上,即此时页面中的{{}}还没有被替换掉。

  beforeMount() {
    console.log('挂在之前调用', this.$el)
  },

打印结果:

clipboard.png

实例挂载到DOM上,此时可以通过DOM API获取到DOM节点,$ref属性可以访问。

  mounted () {
    console.log('挂在dom节点', this.$el)
  },

打印结果:

clipboard.png

响应式数据更新时调用,发生在虚拟DOM打补丁之前。 组件更新之前执行的函数。 数据更新了,但是,vue(组件)对象对应的dom中的内部(innerHTML)没有变,所以叫作组件更新前。

  beforeUpdate() {
    console.log('组件更新前--数据', this.message)
    console.log('组件更新前--dom', this.$el.innerHTML)
  },

打印结果:

clipboard.png

实战场景:适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器

虚拟 DOM 重新渲染和打补丁之后调用,组件DOM已经更新,可执行依赖于DOM的操作

updated() {
    console.log('组件更新时--数据', this.message)
    console.log('组件更新时--dom', this.$el.innerHTML)
}

打印结果:

clipboard.png

beforeDestroy() {
    console.log('实例销毁前', this.$el)
},

实例销毁之前调用。这一步,实例仍然完全可用,this仍能获取到实例

打印结果: clipboard.png

实例销毁后调用,调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

二.父子组件之间生命周期的执行顺序 为了证明一下父子组件之间的生命周期,先看一下页面的渲染父子组件生命周期时如何进行的

clipboard.png

打印结果:

clipboard.png 根据打印结果,我们能发现,首先走的是父组件的生命周期,在走完beforeMount之后,就子组件开始走生命周期,直接到子组件挂载dom节点之后,父组件在挂载dom节点。这样,页面渲染完毕。 那么,当数据发生更新的时候,父子组件的beforeUpdate,update的顺序是怎么样的呢?

当当当,打印结果来了,一目了然:会先走父组件的beforeUpdate,然后走子组件的beforeUpdate, updated,只有等子组件更新完毕之后,父组件才会走updated。更新完毕。

clipboard.png

销毁的时候,父子组件的销毁顺序是怎样的呢? 父组件会先走销毁前的钩子函数,然后子组件走销毁前,和销毁后的钩子函数,子组件销毁完毕之后,父组件在走销毁时的钩子函数。

clipboard.png

三.混入mixins的生命周期 当组件生命周期与mixins混入的生命周期发生碰撞时,又会擦出什么样子的火花呢?

clipboard.png 打印结果:

clipboard.png

clipboard.png

通过打结果,我们不难发现,当mixins的生命周期与组件的生命周期碰撞的时候,会先走mixins的生命周期,在走组件的生命周期

四.总结 一直想写一篇关于生命周期的博客,来总结一下,自己在项目中遇见的问题,就是有时候 发现一些问题真的是因为生命周期的掌握不牢固而导致的,虽然已经解决,但是还希望自己能动手去在根据自己的小demo证实一下,生命周期的具体流程。在这里总结了一个vue实例在被创建前所经历的一系列的初始化的过程。vue从出生到死亡的整个过程。以及在父子组件中,生命周期是如何走的,还有混入的时候,混入的生命周期与组件的生命周期的执行顺序。可能还存在总结不足的地方,后续会继续优化的。

借鉴:在写这篇文章的时候,也借鉴了几篇其他人的博客,发现写的很好。给大家推荐一下。 https://juejin.im/entry/5aee8…

https://blog.csdn.net/jiang77…

https://segmentfault.com/a/11…

[转载]原文链接:https://segmentfault.com/a/1190000020073586

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72515.html

文章标题:深入解析vue的生命周期

相关文章
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
回到顶部