生命周期钩子是 Vue.js 中用于管理组件生命周期不同阶段状态和行为的预定义方法。Vue.js 提供了以下生命周期钩子:创建阶段:beforeCreate,created挂载阶段:beforeMount,mounted更新阶段:beforeUpdate,updated销毁阶段:beforeDestroy,destroyed其他钩子:activated,deactivated,errorCaptured,render

Vue.js 生命周期钩子
什么是生命周期钩子?
生命周期钩子是 Vue.js 中预定义的方法,在组件的生命周期不同阶段自动调用。它们允许我们在特定时刻管理组件的状态和行为。
Vue.js 中有哪些生命周期钩子?
立即学习“前端免费学习笔记(深入)”;
Vue.js 提供了以下生命周期钩子:
创建阶段
-
beforeCreate:在实例初始化之前调用 -
created:在实例初始化之后、虚拟 DOM 渲染之前调用
挂载阶段
-
beforeMount:在组件挂载之前调用 -
mounted:在组件挂载之后、虚拟 DOM 渲染之后调用
更新阶段
-
beforeUpdate:在 DOM 更新之前调用 -
updated:在 DOM 更新之后调用
销毁阶段
-
beforeDestroy:在组件销毁之前调用 -
destroyed:在组件销毁之后调用
其他钩子
-
activated:在保持激活状态的组件被激活时调用 -
deactivated:在保持激活状态的组件被取消激活时调用 -
errorCaptured:当在渲染树中任何子组件中捕获错误时调用 -
render:用于渲染组件的虚拟 DOM
钩子的使用
生命周期钩子可用于各种目的,包括:
- 初始化数据
- 绑定事件侦听器
- 执行异步操作
- 处理 DOM 更新
- 清理资源
举例
例如,created 钩子可用于在组件创建后立即初始化数据:
export default {
created() {
this.initialData = fetch('api/initial_data');
},
}而 mounted 钩子可用于在组件挂载后绑定事件侦听器:
export default {
mounted() {
document.addEventListener('click', this.handleClick);
},
}










