Vue组件的生命周期

系统管理员 2022-09-09 09:59 241阅读 0赞

首先，如图所示：组件在各个阶段的状态（[https://cn.vuejs.org/v2/guide/instance.html][https_cn.vuejs.org_v2_guide_instance.html]）

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zi_5bCU5YW5_size_20_color_FFFFFF_t_70_g_se_x_16][]

## 组件的创建阶段 ##

**1.new vue() :**

new一个vue的实例对象；此时会进入组件的创建过程（该组件在代码中被注册并使用时，就代表着其被new了一个新的实例对象）。

**2.Init Events & Lifecycle** ：

初始化组件的事件和生命周期函数；当执行完这一步之后，组件的生命周期函数就已经全部初始化好了，等待着依次去调用。

**3.beforeCreate ：**

这是第一个生命周期函数；此时，组件的props，data和methods以及页面DOM结构，都还没有初始化；所以此阶段，什么都做不了。

**4.Init injections & reactivity ：**

这个阶段中，正在初始化props，data和methods中的数据以及方法。

**5.created ：**

此时，组件的props，data和methods已经可以用了；但是组件的模板结构尚未生成，页面还没有渲染出来；**在这个生命周期函数中，我们经常会发起Ajax请求**；

**6.判断是否有el，template，然后进行编译**

正在解析模板结构，把data上的数据拿到，并且解析执行模板结构汇总的指令；当所有指令被解析完毕，那么模板页面就被渲染到内存中了；当模板编译完成，我们的模板页面，还没有挂载到页面上，只是存在于内存中，用户看不到页面；

总结：基于数据和模板在内存中编译生成HTML结构

**7.beforeMount :**

当模板在内存中编译完成，会立即执行这个函数beforeMount，此时内存中的Html结构成功渲染到了浏览器中，此时浏览器中已经包含了当前组件的DOM结构，但页面上看不到真实的数据，用户看到的只是一个模板页面而已；

**8.创建并替换**

这一步把正在内存中渲染好的模板结构替换掉el属性指定的DOM元素；

**9.mounted ：**

mounted是组件创建阶段最后的一个生命周期函数；此时，页面已经真正的渲染好了，可以操作DOM元素了，用户也可以看到真实的页面数据了；当这个生命周期函数执行完，组件就离开了创建阶段，进入到了运行中的阶段；**如果大家使用到一些第三方的UI插件，而且这个插件还需要被初始化，那么，必须在mounted中来初始化插件；**

## 组件的运行阶段 ##

会根据data数据的变化，有选择性的被触发0次或N次；

**10.当数据改变时（when data changes）**

**11.beforeUpdate ：**

在执行beforeUpdate运行中的生命周期函数的时候，**将要**根据变化后最新的数据重新渲染组件的模板结构；但是页面上呈现的数据还是旧的

**12.（virtual DOM re-render and patch）**

正在根据最新的data数据，重新渲染内存中的的DOM结构；并把渲染好的模板结构替换到页面上

**13.updated ：**

页面已经完成了更新，此时数据是最新的，同时，页面上呈现的数据也只最新的。

## **组件销毁阶段** ##

**14.beforeDestroy ：**

当执行beforeDestroy的时候，组件即将被销毁，但是还没有真正开始销毁，此时组件还是正常可用的；data、methods等数据或方法，依旧可以被正常访问

**15.销毁过程**

销毁组件的数据侦听器，子组件，事件监听

16.destroyed ：

组件已完成了销毁，组件无法使用，组件在浏览器中对应的DOM结构已被完全移除，props，data和methods都不可使用。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zi_5bCU5YW5_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[https_cn.vuejs.org_v2_guide_instance.html]: https://cn.vuejs.org/v2/guide/instance.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zi_5bCU5YW5_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/3336ea3867ab43d5bb69b9dd31eaf2a9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zi_5bCU5YW5_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/e0f0a447976641b38ae83825f4fd2554.png