Vue组件生命周期与钩子函数

组件生命周期

​ 组件（组件是可复用的 Vue 实例）从创建到销毁的过程就是组件的生命周期，是一个时间段。

组件生命周期钩子函数

（vue3与vue2生命周期钩子函数略有不同，本文以vue2为主）

​ VUE 提供的生命周期钩子函数，会伴随组件的生命周期，自动按次序执行 ，这给了用户在不同阶段添加自己的代码的机会。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

​ 生命周期图示

创建阶段钩子函数

1. beforeCreate()

   在组件实例初始化完成之后立即调用。

   此时刚刚初始化了一个vue空的实例对象，对象上只有默认的一些生命周期函数和默认事件，props，data和methods尚未初始化，处于不可用状态。

2. created()

   在组件实例处理完所有与状态相关的选项后调用。

   组件的props，methods，data已创建好，可以使用，但组件的模板结构尚未生成 ，不能操作DOM，是可以发起Ajax请求的最早节点。

3. beforeMount()

   在组件被挂载之前调用。

   内存编译好的HTML结构准备渲染到浏览器中，此时浏览器中还没有当前组件的DOM结构，无法操作DOM。

4. mounted()

   在组件被挂载之后调用。

   已经将创建的HTML结构渲染到浏览器中，包含了当前组件的DOM结构，可以执行DOM操作的最早节点。

运行阶段钩子函数

1. beforeUpdate()

   在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。

   此时页面中显示的数据还是旧的，但是data中的数据是最新的，页面尚未更新。这里会先根据data中最新的数据，在内存中，重新渲染出一份 最新的虚拟DOM树，当虚拟DOM树更新后，会把最新的虚拟DOM渲染到页面中去。完成从model => view的更新。

2. updated()

   在组件因为一个响应式状态变更而更新其 DOM 树之后调用。

   此时页面和 data 数据已经保持同步，都是最新的。

销毁阶段钩子函数

1. beforeDestroy()

   组件销毁前调用。

   此时data和所有的methods，以及过滤器，指令还处于可用状态，没有真正的销毁。

2. destroyed()

   组件销毁后调用。

   该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。