详解 Vue 的各个生命周期
文章目录
- 详解 Vue 的各个生命周期
- Vue 组件的生命周期
- 1.1 创建阶段
- 示例：
- 1.2 挂载阶段
- 示例：
- 1.3 更新阶段
- 示例：
- 1.4 销毁阶段
- 示例：
- 生命周期总结
- 生命周期钩子对比表
- 参考链接
Vue 组件的生命周期
在 Vue 中，组件的生命周期可以被划分为创建、运行和销毁三个阶段。以下是每个阶段的重要生命周期钩子。
1.1 创建阶段
在这个阶段，组件开始创建。包括了以下几个生命周期钩子：
beforeCreate：在实例初始化之后、数据观测 (data observation) 和事件/侦听器配置之前被调用。created：在实例被创建后调用。此时实例已被完全设置，包括数据观测和属性初始化。
示例：
new Vue({data() {return {message: 'Hello, Vue!'}},beforeCreate() {console.log('beforeCreate: 实例刚被创建，数据未初始化');},created() {console.log('created: 实例已创建，数据准备就绪:', this.message);}
});
1.2 挂载阶段
在这个阶段，组件被挂载到 DOM 上。包括以下生命周期钩子：
beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。mounted：在挂载完成后被调用，此时组件的 DOM 结构已被渲染并且可以访问。
示例：
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 更新完成后被调用。
示例：
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：在实例被销毁后调用，所有的事件监听器将被移除。
示例：
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 | 实例销毁后 | 所有事件监听器被移除，完成收尾工作 |
参考链接
- Vue.js 官方文档
- Vue.js 生命周期
