vue 生命周期钩子函数

Vue.js 的生命周期钩子函数用于在组件的生命周期不同阶段执行相应的逻辑。

以下是 Vue.js 2.x 中的生命周期钩子函数以及它们在组件生命周期中的调用顺序：

（灰色代表在vue3.x中删除了的钩子函数）

1. beforeCreate： 在实例初始化之后，数据观测和事件配置之前被调用。在此阶段，组件实例的选项对象已经被解析，但是数据还没有初始化。
2. created： 在实例创建完成后被立即调用。在这一阶段，实例已经完成了数据观测（data observer）、属性和方法的运算，但是尚未挂载到 DOM 上。
3. beforeMount： 在挂载开始之前被调用，即将开始渲染模板。在此阶段，Vue 实例的 el 属性还没有替换为实际的 DOM 元素。
4. mounted： 在挂载完成后被调用。在这一阶段，Vue 实例已经挂载到了 DOM 上，可以访问到 DOM 元素。
5. beforeUpdate： 在数据更新之前被调用，发生在虚拟 DOM 重新渲染和打补丁之前。在此阶段，可以对数据进行修改。
6. updated： 在数据更新之后被调用，发生在虚拟 DOM 重新渲染和打补丁之后。在此阶段，DOM 已经更新完成。
7. beforeDestroy： 在实例销毁之前被调用。在此阶段，实例仍然完全可用。
8. destroyed： 在实例销毁之后被调用。在此阶段，Vue 实例及其所有的指令已经解绑，事件监听器已经移除，所有的子实例也已经销毁。

以下是 Vue.js 3.x 中的生命周期钩子函数：

（蓝色代表vue3.x中新增，在vue2.x中不存在的钩子函数）

1. beforeCreate： 在实例初始化之后，数据观测和事件配置之前被调用。
2. created： 在实例创建完成后被立即调用。
3. beforeMount： 在挂载开始之前被调用，即将开始渲染模板。
4. onBeforeMount： 在挂载之前触发。
5. mounted： 在挂载完成后被调用。
6. onMounted： 在挂载之后触发。
7. beforeUpdate： 在数据更新之前被调用，发生在虚拟 DOM 重新渲染和打补丁之前。
8. onBeforeUpdate： 在更新之前触发。
9. updated： 在数据更新之后被调用，发生在虚拟 DOM 重新渲染和打补丁之后。
10. onUpdated： 在更新之后触发。
11. beforeUnmount： 在卸载之前触发。
12. onBeforeUnmount： 在卸载之前触发。
13. unmounted： 在卸载后触发。
14. onUnmounted： 在卸载之后触发。
15. errorCaptured： 捕获并处理组件生命周期钩子和渲染函数期间发生的错误。