vue2生命周期都做了什么事（vue2.x生命周期）



Title：vue2 生命周期详解

Date：2022-05-03

在探究vue生命周期之前，我们先提出一个问题：

之后，发生了什么？，当数据（）发生变化之后又发生了什么？

由上图可知，之后，分别经过了以上几个阶段，分别是初始化阶段，模板编译阶段，挂载阶段，更新阶段，销毁阶段，那每一个阶段都干了些什么事呢？

1. 首先做一些初始化操作，主要是设置一些私有属性到实例中。
2. 运行生命周期钩子函数
3. 进入注入流程，处理属性，，，，，，最后使用代理模式将这些属性挂载到实例中。
4. 运行生命周期钩子函数

1. 生成函数：如果有配置，直接使用配置的函数，如果没有，使用运行时编译器，把模板编译成函数。

1. 运行生命周期钩子函数
2. 创建一个，传入一个函数，该函数会运行，函数，并把函数的返回结果作为参数给函数执行。

   在执行函数的过程中会搜集所有依赖，将来依赖发生变换时会出现执行函数。

   在执行的过程中，会触发函数，由于目前还没有就的虚拟DOM树，因此直接为当前的虚拟DOM树的每一个节点生成对应elm属性，即真实DOM。

   如果遇到创建一个组件实例的，则会进入组件实例化流程，该流程同实例流程，同上初始化阶段，编译阶段，挂载阶段。最终会把创建好的组件实例挂载到的属性中，以便复用。

3. 运行生命周期钩子函数mounted

1. 数据发生变化后，所有依赖该数据的都会重新运行。
2. 会被调度器放到中运行，参考vue数据响应式原理，也就是微队列中，这样避免避免多个依赖的数据同时改变后被多次执行。
3. 运行生命周期钩子函数beforeUpdate。
4. 函数重新执行：

   在执行函数的过程中，会先去掉之前的依赖，重新收集新的依赖，将来依赖发生变化时出现运行函数。

   在执行函数的过程中，会触发函数，对比新旧两棵DOM树：

   当对比两棵DOM树的节点的时候，有两种情况，分别：

   • 普通节点

     普通节点的对比会导致真实节点被创建，删除，移动，更新

   • 组件节点

     组件节点的对比会导致组件被创建，删除，移动，更新。

     a）组件节点创建的时，进入组件实例化流程，同上初始化阶段，编译阶段，挂载阶段。

     b）当旧组件节点删除时，会调用旧组件的方法删除组件，该方法会触发生命周期钩子函数beforeDestroy，然后递归调用组件的方法，然后出发生命周期钩子函数destroyed

     c）当组件更新时，相当于组件的函数被重新触发，进入渲染流程，同更新阶段

5. 运行生命周期钩子函数updated

1. 当组件销毁的时候，会调用组件的方法删除组件，该方法会调用和方法

2. 执行方法后，将当前组件实例从父组件实例的中删除

3. 移除自身的依赖监听和事件监听，实例内响应式数据的引用

4. 执行方法后，通过方法移除实例上的所有事件监听器，

回到开头那个问题，之后，发生了什么？，当数据（）发生变化之后又发生了什么？销毁呢？

当后，会递归创建vue实例和组件实例：初始化阶段，模板编译阶段，挂载阶段。

当所有子组件实例创建完成后vue实例才创建完成

vue实例 beforeCreate
vue实例 created
vue实例 beforeMount
App beforeCreate
App created
App beforeMount
A beforeCreate
A created
A beforeMount
B beforeCreate
B created
B beforeMount
B mounted
A mounted
App mounted
vue实例 mounted

当数据变化时

App beforeUpdate
A beforeUpdate
B beforeUpdate
B updated
A updated
App updated

当组件A，B销毁时

App beforeUpdate
A beforeDestroy
B beforeDestroy
B destroyed
A destroyed
App updated

以上仅个人理解，如有不当之处还请不吝赐教

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/22878.html