Vue的生命周期过程详解

Vue的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。对应的8个生命周期钩子函数：

• beforeCreate、created、
• beforeMount、mounted、
• beforeUpdate、updated、
• beforeDestroy、destroyed

Vue的生命周期图示（官方中文文档）

（以下图片转自coderwhy老师，帮助理解 Vue生命周期）

Vue的生命周期过程详解（主要以钩子函数为主线）

1、beforeCreate：
实例组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行 beforeCreate 钩子函数，数据和 dom 都未初始化（取不到），一般不做任何操作。

2、created：
挂载数据，绑定事件已完成，然后执行created函数，这个时候已经可以操作数据, 而且不会触发 updated 函数，一般在这里做初始数据的获取（相比在 beforeMount 获取数据页面渲染速度较快）。

3、beforeMount：
执行这个函数前，虚拟dom 创建完成，真实 dom未完成挂载。这里更改数据不会触发 updated ，在这里也可以做初始数据的获取。

4、mounted：
执行 mounted 钩子函数前，数据、真实dom都已经处理好了,事件也挂载好了，一般在这里初始化一些操作真实 dom 的方法。

5、beforeUpdate：
当组件或实例的数据更改，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。可以监听到 data 变化，但view层的数据还没有变化。一般不做任何操作。

6、updated：
view层的数据重新渲染完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

7、beforeDestroy：
当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、数据和事件的监听等。

8、destroyed：
组件的数据绑定、事件监听清除后只剩下dom空壳，这个时候，执行 destroyed 彻底销毁实例，如果在 beforeDestroy 没有做善后工作，在这里做善后工作也可以。

注：掌握各个钩子函数执行时的环境，并在项目开发中正确使用显得尤为重要，能避免一些基础的bug。

参考文章：
vue 生命周期 详解
Vue.js 中文文档
Vue生命周期