Vue 2 生命周期函数详解
引言
Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。理解 Vue 的生命周期函数（Lifecycle Hooks）对于开发高效的 Vue 应用至关重要。本文将详细介绍 Vue 2 的生命周期钩子、每个阶段的作用及其代码示例，帮助读者更好地掌握这一重要概念。
1. Vue 生命周期概述
Vue 实例从创建到销毁经历了一系列的阶段，这些阶段被称为生命周期。在每个阶段，Vue 提供了相应的钩子函数（Lifecycle Hooks），允许开发者在特定的时间点执行自定义逻辑。
以下是 Vue 2 的生命周期图：
(new) --> init() --> beforeCreate() --> created() --> beforeMount() --> mounted()| |v v(data observer) (render DOM)| |v vupdated() beforeUpdate()| |v vdestroyed() beforeDestroy()2. 常见的生命周期钩子
a. beforeCreate
- 描述：实例刚刚被创建，数据观测（data observer）、属性和方法的运算还未开始，
el和data属性都未初始化。 - 使用场景：很少在这个阶段做操作，因为此时无法访问数据和 DOM。
b. created
- 描述：实例已完成数据观测，属性和方法的运算，
data已经初始化，但还没有挂载到 DOM 上。 - 使用场景：适合进行异步数据获取或初始化状态。
示例代码：
new Vue({data: {message: 'Hello Vue!'},created() {console.log('created:', this.message);// 在这里可以发起异步请求，获取数据}
});c. beforeMount
- 描述：在挂载开始之前被调用，相关的
el和template已经编译为虚拟 DOM，但尚未渲染到页面上。 - 使用场景：可以在渲染之前修改数据或虚拟 DOM。
d. mounted
- 描述：实例已经挂载到真实的 DOM 上，此时可以访问到 DOM 元素。
- 使用场景：适合初始化第三方库、绑定事件监听器等需要操作真实 DOM 的场景。
示例代码：
new Vue({el: '#app',mounted() {console.log('mounted:', this.$el);// 初始化第三方库，如 jQuery 插件}
});e. beforeUpdate
- 描述：数据更新时调用，在此期间你可以访问旧的 DOM 状态。
- 使用场景：适合在数据更新前进行一些处理，比如取消不必要的网络请求。
f. updated
- 描述：由于数据更改导致的视图更新完成后调用。注意，这时不应该在此钩子中进一步更改状态，否则会导致递归调用。
- 使用场景：适合在视图更新后执行的操作，例如操作新增的 DOM 元素。
示例代码：
new Vue({data: {message: 'Hello Vue!'},methods: {changeMessage() {this.message = 'Updated Message';}},updated() {console.log('updated:', this.message);// 不要在 updated 中改变 state，以免造成递归更新}
});g. beforeDestroy
- 描述：实例即将被销毁之前调用。在这一步，实例仍然是完全可用的。
- 使用场景：适合清理定时器、解绑事件监听器等资源释放操作。
h. destroyed
- 描述：实例销毁后调用。此时所有的指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
- 使用场景：确保所有资源都被正确释放，避免内存泄漏。
示例代码：
new Vue({data: {timer: null},created() {this.timer = setInterval(() => {console.log('Timer running...');}, 1000);},beforeDestroy() {clearInterval(this.timer);console.log('Timer cleared before destruction.');},destroyed() {console.log('Instance has been destroyed.');}
});