vue实例的生命周期

1. 从Vue实例创建、运行 、到销毁期间, 总是伴随着各种各样的事件, 这些事件统称为声明周期.
2. 声明周期钩子: 就是生命周期事件的别名而已.
3. 生命周期钩子 = 生命周期函数 = 生命周期事件
4. 主要的生命周期函数分类:

• 创建声明周期的生命周期函数:

  1. new Vue(): var vm = new Vue({})表示开始创建一个Vue的实例对象

  2. Init Event & Lifecycle: 刚初始化了一个Vue空的实例对象, 这时候, 这个对象身上, 只有默认的一些声明周期函数和默认的事件, 其他的东西都未创建.

  • 1.beforeCreate: 实例刚在内存中被创建出来, 此时, 还没有初始化好data 和 methods 属性

  3. Init injections & reactivity: 初始化数据和方法 . 在 created中, data和methods 都已经被初始化好了

  • 2.created: 实例已经在内存中创建好, 此时data 和 methods已经创建好, 此时还没有开始编译模板. 如果要调用 methods 中的方法, 或者操作 data 中的数据, 最早, 只能在 created中操作

  4. 判断 Has “el” option? : 有没有el这个属性

  5.1 NO: when vm.$mount(el) is called

  5.2 YES: 如果有进入判断. Has “template” option? :有没有template属性

  6.1 YES:Compile template into render function: 将模板编译成渲染函数

  6.2 NO:Compile el’s outerHTML as template: 将 div#id编译成模板

  4, 5, 6: 这里表示Vue开始编译模板, 把Vue代码中的那些指令进行执行, 最终, 在内存中生成一个编译好的最终模板字符串. 然后, 把这个模板字符串, 渲染为内存中的DOM. 此时, 只是在内存中, 渲染好了模板, 并没有把模板真正挂载到真正的页面中去

  • 3.beforeMount: (即将挂载) 函数执行时, 此时在内存中已经完成了模板的编译, 但是还没有挂载到页面中.

  7.Create vm.$el and replace “el” with it: 创建虚拟机, $el并将"el"替换为它. 这一步将内存中编译好的模板, 真实的替换到浏览器的页面中去;

  • 4.mounted: 是实例创建期间的最后一个生命周期函数, 当执行完 mounted就表示, 实例就已经被完全创建好了, 此时, 如果没有其它操作的话, 这个实例, 就静静的躺在我们的内存中, 一动不动

  如果要通过某些插件操作页面上的DOM节点, 最早要在 mounted中进行; 只要执行完了mounted, 就表示整个Vue实例已经初始化完毕了; 此时, 组件已经脱离了创建阶段, 进入运行阶段

• 运行期间的生命周期函数:

  7. Mounted: when data changes 当数据发生变化时, 才执行下边两个生命周期函数. 这两个时间, 会根据data数据的改变, 有选择性的触发0次到多次.

  • 5.beforeUpdate: (即将更新)当执行 beforeUpdate 的时候, 页面中的显示的数据, 还是旧的, 此时data数据是最新的, 页面尚未和最新的数据保持同步.

  8. Virtual DOM re-render and patch: 这一步执行的是: 先根据data中最新的数据, 在内存中, 重新渲染一份最新的内存DOM树. 当最新的内存DOM树被更新之后, 会把最新的内存DOM树, 重新渲染到真实的页面中去, 这时候就完成了数据从data(Mode层)到view(视图层)的更新

  • 6.updated: updated事件执行时, 页面和data数据已经保持同步了, 都是最新的

• 毁期间的生命周期函数:

  • 7.beforeDestroy: 当执行 beforeDestroy钩子函数的时候, Vue实例就已经从运行阶段, 进入到销毁阶段;当执行 beforeDestroy的时候, 实例身上所有的data和所有的 methods, 以及过滤器, 指令… 都处于可用状态, 此时, 还没有真正执行销毁过程.

  • 8.destroyed: 当执行到destroyed函数的时候, 组件已经被完全销毁, 此时, 组件中所有的数据, 方法, 指令, 过滤器… 都已经不可用了.