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

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

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

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

​ 生命周期图示

beforeCreate()

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

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

created()

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

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

beforeMount()

在组件被挂载之前调用。

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

mounted()

在组件被挂载之后调用。

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

beforeUpdate()

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

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

updated()

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

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

beforeDestroy()

组件销毁前调用。

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

destroyed()

组件销毁后调用。

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