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

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <blockquote>

讯享网

Title：vue2 生命周期详解

Date：2022-05-03

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

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

在这里插入图片描述
讯享网

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

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

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

运行生命周期钩子函数
创建一个，传入一个函数，该函数会运行，函数，并把函数的返回结果作为参数给函数执行。
```
讯享网
```
在执行函数的过程中会搜集所有依赖，将来依赖发生变换时会出现执行函数。

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

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

数据发生变化后，所有依赖该数据的都会重新运行。
会被调度器放到中运行，参考vue数据响应式原理，也就是微队列中，这样避免避免多个依赖的数据同时改变后被多次执行。
运行生命周期钩子函数beforeUpdate。
函数重新执行：
在执行函数的过程中，会先去掉之前的依赖，重新收集新的依赖，将来依赖发生变化时出现运行函数。

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

当对比两棵DOM树的节点的时候，有两种情况，分别：
- 普通节点
  普通节点的对比会导致真实节点被创建，删除，移动，更新
- 组件节点
  组件节点的对比会导致组件被创建，删除，移动，更新。
  
  a）组件节点创建的时，进入组件实例化流程，同上初始化阶段，编译阶段，挂载阶段。
  
  b）当旧组件节点删除时，会调用旧组件的方法删除组件，该方法会触发生命周期钩子函数beforeDestroy，然后递归调用组件的方法，然后出发生命周期钩子函数destroyed
  
  c）当组件更新时，相当于组件的函数被重新触发，进入渲染流程，同更新阶段
运行生命周期钩子函数updated

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

讯享网

执行方法后，将当前组件实例从父组件实例的中删除
移除自身的依赖监听和事件监听，实例内响应式数据的引用
```
讯享网
```
执行方法后，通过方法移除实例上的所有事件监听器，

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

在这里插入图片描述

讯享网

讯享网

当后，会递归创建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

在这里插入图片描述

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

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

相关推荐