vue2生命周期详细过程

创建

vue实例与创建组件的流程基本一致

1. 首先做一些初始化操作,主要是设置一些私有属性到实例中
2. 运行生命周期钩子函数beforeCreate,此阶段啥也干不了,数据响应式都没有
3. 进入注入流程, 处理属性,computed,methods,data, provide,inject, 最后使用代理模式将它们挂载到实例中
4. 运行生命周期钩子函数created 此时有数据响应式, 没有Dom
5. 生成render函数: 如果有配置,则直接使用配置的render, 如果没有,使用运行时编译,把模板编译成render函数
6. 运行生命周期钩子函数beforeMount
7. 创建一个Watcher,传入一个函数updateComponent, 该函数会运行render,把得到的vnode传入_update函数执行。在执行render函数的过程中,会收集所有的依赖,将来依赖变化时重新运行updateComponent函数。在执行_update函数过程中,触发patch函数,由于目前没有旧树,因此直接为当前的虚拟dom树的每一个普通节点生成elm属性,即真实dom。如果遇到创建一个组件的vnode,则会重复1-8(属于递归创建),最终生成的组件实例挂载到vnode的componentInstance属性中,以便复用。(此时页面已经能看到东西了)
8. 运行生命周期钩子函数mounted此时有数据响应式, 有Dom

重渲染

1. 数据变化后,所有依赖该数据的watcher都会重新运行,watcher会被调度器放入nextTick中运行,避免多个依赖同时发生变化导致watcher多次运行
2. 运行生命周期钩子函数beforeUpdate
3. 运行updateComponent,在render函数执行的过程中会去掉之前的依赖,重新收集依赖.在_update函数的运行过程中,触发patch函数,新旧两棵树对比,普通html节点对比会导致真实节点被创建,删除,移动,更新,组件节点对比会导致组件被创建,删除,移动,更新.当组件被创建,进入实例化流程.当组件被删除时,会调用组件的$destroy方法,该方法会先触发生命周期钩子函数beforeDestory,然后递归调用子组件的$destroy方法,然后触发生命周期钩子函数destroyed.当组件属性更新时,相当于组件的updateComponent重新运行,进入渲染流程
4. 运行生命周期钩子函数updated