【vue】生命周期详解

皮皮克
345 阅读2分钟

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

stateDiagram-v2

实例创建 --> beforeCreate 
beforeCreate --> 注入
注入 --> created
created --> 生成render
生成render -->beforeMount
beforeMount -->生成真实DOM
生成真实DOM --> mounted
 mounted -->已挂载 数据变动
 已挂载 --> beforeDestroy  已挂载 -->数据变动
 beforeDestroy -->销毁组件
 数据变动 --> beforeUpdate
 beforeUpdate --> 重新渲染
 重新渲染 --> updated
 updated --> 已挂载
 销毁组件 --> destroyed
 destroyed -->已销毁

1.创建vue实例流程

  1. 首先做一些初始化的操作，主要是设置一些私有属性到实例中
  2. 运行生命周期构子函数beforeCreate
  3. 进入注入流程：处理属性，computed，methods，data，provide，inject，最后使用代理模式将它们挂载到实例中
  4. 运行生命周期构子函数created
  5. 生成render函数：如果有配置，直接生成配置的render，如果没有，使用运行时，编译器把模板编译为render
  6. 运行生命周期构子函数beforeMount
  7. 创建一个watcher，传入一个函数updateComponent，该函数会运行render，把得到的vnode再传入_update函数执行。
  • 在执行render函数的过程中，会收集所有依赖，将来依赖变化时会重新运行updateComponent函数。
  • 在执行_update函数的过程中，触发patch函数，由于目前没有旧树，因此直接为当前的虚拟dom树的每一个普通节点生成elm属性，即真实dom.
  • 如果遇到创建一个组件的vnode，则会进入组件实例化流程，该流程和创建vue实例流程基本相同，最终会把创建好的组件实例挂载vnode的componentInstance属性中，以便复用。
  1. 运行生命周期构子函数mounted。

2 重渲染？

  1. 数据变化后，所有依赖该数据的watcher均会重新运行，这里仅考虑updateComponent函数对应的watcher
  2. watcher会被调度器放到nextTick中运行，也就是微队列中，这样是为了避免多个依赖的数据同时改变后被多次执行
  3. 运行生命周期构子函数beforeUpdate
  4. updateComponent函数重新执行
  • 在执行render函数的过程中，会去掉之前的依赖，重新收集所有依赖，将来依赖变化时会重新运行updateComponent函数
  • 在执行_update函数过程中触发patch函数。
  • 新加两颗树进行对比。
  • 普通html节点的对比会导致真实节点被创建，删除，移动，更新
  • 组件节点的对比会导致组件被创建，删除，移动，更新
  • 当新组件需要创建时，进入实例化流程
  • 当旧组件需要删除时，会调用旧组件的$destory方法删除组件，该方法会先触发生命周期构子函数beforeDestory，然后递归调用子组件的$destory方法，然后触发生命周期构子函数destoryed
  • 当组件属性更新时，相当于组件的updateComponent函数被重新触发执行，进入重渲染流程
  1. 运行生命周期构子函数updated
avatar
文章
阅读
粉丝