深入 vue2 运行流程

115 阅读2分钟
vue实例创建
• 首先初始化操作 ,主要是设置一些私有属性到实例中
• 运行生命周期函数 beforeCreate
• 注入历程:处理属性,computed、method、data、provide、inhect 最后使用代理模式将他们挂载到实例中
• 运行生命周期函数created
• 生成render函数  如果有配置直接使用配置的的render,如果没有,使用运行时的编译器,把模块template编译成render
• 运行生命周期函数boforeMount   在这个之后 如果遇到组件 将 new Vue(component) 
• 创建一个Watcher,传入一个函数updateComponent,该函数会运行render,把得到的vnode在传入_update函数中
	○ 在执行render函数的过程中,会收集所有的依赖,当依赖变化是会重新运行updateComponent函数在执行_update函数的过程中,触发patch函数,由于目前没有旧树,直接为当前虚拟dom树的每个节点生成elm属性,即真实dom
	○ 如果遇到创建组件的vnode,则会进入组件实例化流程,该流程与vue实例流程基本相同,最终把创建好的组件挂载到vnode的componentInstance属性中,以重复使用
• 运行生命周期函数mounted
重渲染:
• 数据变化后,所有依赖该数据的Watcher均会重新运行,这里仅考虑updateComponent函数对应的Watcher
• watcher会被调度器放到nextTick中运行,也就是微队列,这样是为了避免多个依赖的数据同时改变后被多次执行
• 运行生命周期走子函数beforeUpdate
• updateComponent函数重新执行
	○ 在执行render函数的过程中,会去掉之前的依赖,重新收集所有的依赖,将来依赖变化是会重新运行updateComponent函数
	○ 在执行_update函数的过程中,触发patch函数 (diff算法)
	○ 新旧两颗树对比
	○ 普通html节点的对比会导致真实节点被创建、删除、移动、更新
	○ 组件节点的对比导致组件被创建、删除、移动、更新
	○ 当新组建需要创建时,进入实例化流程
	○ 当就组件需要删除是,回调用就组件的$destroy方法 ,然后触发生命周期钩子函数destroyed 当组件属性更新时,相当于组件的updateComponent函数被重新触发执行,进入渲染流程,和本节相同
            最后运行生命周期函数update