Vue实例的生命周期 解析

Vue实例的生命周期

生命周期分为四个阶段：

1. 创建阶段
   • beforeCreate()
   • created()
2. 挂载阶段
   • beforeMount()
   • mounted()
3. 更新阶段
   • beforeUpdate()
   • updated()
4. 销毁阶段
   • boforeDestory()
   • destoryed()

1. new Vue()

首先需要创建一个Vue的实例对象vm

let vm = new Vue({})

执行了new Vue()之后，实际上是通过调用_init方法触发一系列的初始化流程。而_init方法是通过initMixin方法挂载到Vue原型中的。

此时，杠初始化了一个Vue对象,这时候，vm实例对象张只有默认的一些生命周期函数和默认事件，其它的东西都还没有被创建。

注：此时beforeCreate()执行前，data和methods中的数据还没有被初始化。

2. 创建阶段

此时执行beforeCreate()与created()，进如创建阶段。

在创建阶段中，data和methods都已经被初始化好了。

若想最早的调用methods中的方法或者草所data中的数据，就可以在created中操作。

3. 渲染模板

这一部分表示Vue开始编译模板。

把Vue代码中的哪些指令进行执行，最终在内存中生成一个编译好的模板字符串。然后把这个模板字符串，渲染为内存中的DOM，此时，只是在内存中渲染好了模板，但是并没有把模板挂载到阵真正的视图一页面上去。

4. 挂载阶段

执行beforeMount()与mounted()，将虚拟Dom树转换成真实的Dom树，并渲染到页面视图上。

在执行beforeMount()时，模板已经在内存中编译好了，但还没有挂载到页面上去。

当执行完mounted()，表示整个Vue实例已经初始化完毕了。

注：如果想要通过某些插件造作页面上的DOM节点，最早可以在mounted()中进行操作。

面试题：

讲述Vue初次渲染的过程？

​ 首先会把data中的数据处理成响应式数据，实现把data中的所有属性，注入到vm实例。data中每一个属性都有一个对应的dep,在dep中搜集依赖，同时解析模板生成render函数，render函数执行会生成vnode(虚拟节点)，之后通过path()，将VNode转成真实Dom节点渲染到页面上。

5. 更新阶段

执行beforeUpdate()和updated()。

数据更新，当执行beforeUpdate()的时候，页面中显示的还是旧数据，但此时data中的数据时新的，页面和最新的数据没有保持同步。

之后模板会生成一个渲染函数(render())，渲染函数会生成虚拟节点VNode。通过patch()对比新旧VNode，对比后，找到差异，之后把虚拟节点转换成真实节点渲染到页面上。

updated()执行的时候页面和data中的数据已经保持抑一致了。

注：DOM渲染是异步的，当批量修改完数据后会一次性更新DOM，更新完之后会自动调用$nextTick()回调函数，获得新的DOM节点。

6. 销毁阶段

执行boforeDestory()与destoryed()

当执行boforeDestory()时，vm进入销毁阶段，vm省上的所有的data和methods、过滤器、指令…等，都处于可用状态，此时还没有真正执行销毁的过程。

当执行到destoryed()的时候，组件已经被完全销毁了，此时，组件中所有的data和methods、过滤器、指令…等，都已经不能用了。