详解 Vue 的各个生命周期
文章目录
- [详解 Vue 的各个生命周期](#详解 Vue 的各个生命周期)
Vue 组件的生命周期
在 Vue 中，组件的生命周期可以被划分为创建、运行和销毁三个阶段。以下是每个阶段的重要生命周期钩子。
1.1 创建阶段
在这个阶段，组件开始创建。包括了以下几个生命周期钩子：
beforeCreate：在实例初始化之后、数据观测 (data observation) 和事件/侦听器配置之前被调用。created：在实例被创建后调用。此时实例已被完全设置，包括数据观测和属性初始化。
示例：
javascript
new Vue({
data() {
return {
message: 'Hello, Vue!'
}
},
beforeCreate() {
console.log('beforeCreate: 实例刚被创建，数据未初始化');
},
created() {
console.log('created: 实例已创建，数据准备就绪:', this.message);
}
});1.2 挂载阶段
在这个阶段，组件被挂载到 DOM 上。包括以下生命周期钩子：
beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。mounted：在挂载完成后被调用，此时组件的 DOM 结构已被渲染并且可以访问。
示例：
javascript
new Vue({
el: '#app',
data() {
return {
message: 'Hello, Vue!'
}
},
beforeMount() {
console.log('beforeMount: 组件即将挂载，还未渲染到 DOM');
},
mounted() {
console.log('mounted: 组件已挂载，当前 DOM:', this.$el);
}
});1.3 更新阶段
这个阶段是组件数据发生变化后，组件的重新渲染。相关生命周期钩子有：
beforeUpdate：在数据发生变化，DOM 更新之前被调用。updated：在 DOM 更新完成后被调用。
示例：
javascript
new Vue({
el: '#app',
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++;
}
},
beforeUpdate() {
console.log('beforeUpdate: 数据即将更新，当前 count:', this.count);
},
updated() {
console.log('updated: DOM 更新完成，新的 count:', this.count);
}
});1.4 销毁阶段
这个阶段是组件被销毁的时刻，相关生命周期钩子有：
beforeDestroy：在实例销毁之前调用，此时仍可以访问实例。destroyed：在实例被销毁后调用，所有的事件监听器将被移除。
示例：
javascript
new Vue({
el: '#app',
data() {
return {
isVisible: true
}
},
beforeDestroy() {
console.log('beforeDestroy: 组件即将被销毁');
},
destroyed() {
console.log('destroyed: 组件已被销毁');
},
template: `<div>
<button @click="isVisible = false">销毁组件</button>
<p v-if="isVisible">Hello, Vue!</p>
</div>`
});生命周期总结
Vue 的生命周期钩子允许开发者在组件的不同生命阶段插入自定义逻辑。通过合理使用这些钩子，开发者可以：
- 在组件被创建时进行初始化和设置。
- 在挂载后进行 DOM 操作。
- 在组件更新前后执行特定逻辑。
- 在组件生命周期末尾清理资源和事件监听。
理解组件的生命周期，对于编写高效、可靠的 Vue 应用至关重要。通过结合生命周期钩子，我们能够确保各个阶段之间的逻辑衔接与数据的一致性。
生命周期钩子对比表
| 生命周期钩子 | 触发时机 | 说明 |
|---|---|---|
beforeCreate |
实例初始化后 | 数据未初始化，事件和侦听器未配置 |
created |
实例创建后 | 数据已就绪，可以访问属性和方法 |
beforeMount |
挂载开始之前 | render 函数首次调用前，DOM 还未生成 |
mounted |
挂载完成后 | DOM 对象已生成，可以进行 DOM 操作 |
beforeUpdate |
数据更新前 | 可以读取现有状态，但下一轮 DOM 更新未开始 |
updated |
DOM 更新后 | 可以执行依赖于更新 DOM 结果的操作 |
beforeDestroy |
实例销毁前 | 可以清理事件和其他外部资源 |
destroyed |
实例销毁后 | 所有事件监听器被移除，完成收尾工作 |