vue 2 提供了 10 个生命周期钩子函数，分别在不同应用程序生命周期阶段执行，包括初始化（beforecreate）、创建（created）、挂载（beforemount、mounted）、更新（beforeupdate、updated）、激活/停用（activated、deactivated）和销毁（beforedestroy、destroyed），允许开发人员在特定时刻自定义应用程序行为，例如初始化数据、操纵 dom、执行动画或清理资源等。
Vue 2 生命周期钩子函数
概述
Vue 2 生命周期钩子函数是在不同应用程序生命周期阶段执行的函数。这些函数允许开发人员在特定时刻自定义应用程序行为，例如在创建、挂载和销毁组件时。
生命周期钩子函数
立即学习“前端免费学习笔记（深入）”；
Vue 2 提供了以下生命周期钩子函数：
- beforeCreate：在实例初始化后立即执行。
- created：在实例创建完成后执行。
- beforeMount：在挂载元素到 DOM 之前执行。
- mounted：在挂载元素到 DOM 之后执行。
- beforeUpdate：在更新 DOM 之前执行。
- updated：在更新 DOM 之后执行。
- activated：在子组件激活时执行（仅限 keep-alive）。
- deactivated：在子组件停用时执行（仅限 keep-alive）。
- beforeDestroy：在销毁实例之前执行。
- destroyed：在销毁实例之后执行。
作用
生命周期钩子函数用于在以下常见场景中执行操作：
- 初始化数据和方法（created）
- 操纵 DOM（mounted）
- 响应状态变化（beforeUpdate、updated）
- 执行动画或过渡（activated、deactivated）
- 清理资源（beforeDestroy、destroyed）
示例
考虑一个简单的 Vue 组件：
<code class="javascript"><template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
};
},
mounted() {
console.log('Component has been mounted.');
},
beforeDestroy() {
console.log('Component will be destroyed.');
},
};
</script></code>在此示例中：
-
created钩子函数用于初始化message数据。 -
mounted钩子函数用于在将组件挂载到 DOM 后记录一条消息。 -
beforeDestroy钩子函数用于在组件被销毁之前记录一条消息。
