在 Vue.js 中，每个 Vue 实例都经历了从创建到销毁的生命周期过程。在这个过程中，Vue 提供了一系列的生命周期钩子函数，开发者可以在特定的生命周期阶段执行自定义的代码。这些钩子函数允许我们在 Vue 实例的不同阶段添加逻辑，使得 Vue 的行为更加灵活和可控。
在本篇文章中，我们将详细介绍 Vue2 中常用的生命周期钩子函数，并解释它们的执行顺序和应用场景。
一、Vue 实例的生命周期
Vue 实例的生命周期可以分为几个阶段，具体包括：
- 创建阶段：包括实例初始化、数据观测、事件配置等。
- 挂载阶段：Vue 实例的 DOM 被渲染并挂载到页面上。
- 更新阶段：当数据变化时，视图会进行更新。
- 销毁阶段：Vue 实例被销毁，清理相关资源。
Vue 提供了多个生命周期钩子函数，让开发者能够在这些阶段插入自定义的逻辑。
二、常用的生命周期钩子函数
Vue 实例的生命周期钩子函数分为以下几类：
1. 创建前/创建时
-
beforeCreate: 在 Vue 实例初始化之后，数据观测和事件配置之前调用。此时，实例的
data、methods等都没有被挂载到 Vue 实例上，不能访问。 -
created: 在 Vue 实例创建完成后调用，此时数据观测、事件和 watcher 等已经配置完成。可以访问
data和methods，但此时还未挂载 DOM。
new Vue({
data: {
message: 'Hello, Vue!'
},
beforeCreate() {
console.log('beforeCreate: 实例初始化完成，但数据未挂载');
},
created() {
console.log('created: 实例创建完成，数据已挂载', this.message);
}
});
2. 挂载前/挂载时
-
beforeMount: 在挂载开始之前调用，相关的模板编译和 DOM 渲染尚未开始。
-
mounted: 在 Vue 实例挂载到 DOM 后调用，此时 DOM 已经渲染完成，可以进行 DOM 操作。通常用于获取或操作 DOM 元素，或者进行 AJAX 请求。
new Vue({
el: '#app',
data: {
message: 'Vue is awesome!'
},
beforeMount() {
console.log('beforeMount: 挂载开始');
},
mounted() {
console.log('mounted: 实例已挂载到 DOM 上');
}
});
3. 更新前/更新时
-
beforeUpdate: 当数据发生变化时，视图重新渲染之前调用。此时，数据已更新，但视图尚未更新。
-
updated: 在视图更新完成后调用。此时 DOM 已经更新，可以进行 DOM 操作，但不要在
updated中更改数据，避免进入无限循环。
new Vue({
el: '#app',
data: {
count: 0
},
beforeUpdate() {
console.log('beforeUpdate: 数据变化，视图尚未更新');
},
updated() {
console.log('updated: 视图更新完成');
}
});
4. 销毁前/销毁时
-
beforeDestroy: 在实例销毁之前调用。可以在此时进行一些清理工作，如取消事件监听、定时器等。
-
destroyed: 在 Vue 实例销毁之后调用，所有的事件监听、子组件等都会被销毁。
new Vue({
el: '#app',
data: {
message: 'Goodbye, Vue!'
},
beforeDestroy() {
console.log('beforeDestroy: 实例销毁前');
},
destroyed() {
console.log('destroyed: 实例销毁后');
}
});
三、生命周期钩子函数的执行顺序
Vue 实例的生命周期钩子函数是按照一定的顺序执行的。以下是 Vue2 生命周期钩子函数的执行顺序：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
简而言之，生命周期的执行顺序是从实例的创建开始，到数据更新，再到实例销毁。开发者可以在这些不同的阶段插入逻辑。
四、生命周期钩子函数的应用场景
不同的生命周期钩子函数适用于不同的应用场景。以下是一些常见的用法：
1. beforeCreate 和 created: 初始化逻辑
- 在
created中通常会做一些数据初始化、API 请求等操作。因为此时组件的数据已经可以访问了。
2. mounted: 访问和操作 DOM
- 在
mounted中可以访问 DOM 元素，通常用于与第三方库的集成、动态操作 DOM 等。例如，如果需要操作图表、地图等库，通常会在mounted中进行。
3. beforeUpdate 和 updated: 数据变化时的操作
beforeUpdate和updated常用于响应式数据的更新。如果需要在数据更新前后执行一些操作，可以在这些钩子中实现。
4. beforeDestroy 和 destroyed: 清理工作
- 在组件销毁之前，应该清理一些资源，例如清除定时器、取消订阅等操作。在
beforeDestroy和destroyed中完成这些工作。
五、结合 Vue Router 使用生命周期
在使用 Vue Router 进行页面路由管理时，生命周期钩子函数同样非常重要，特别是在页面切换时。比如，在路由进入前进行权限验证、在路由离开时清理数据等。
new Vue({
el: '#app',
router,
beforeCreate() {
console.log('Vue 实例即将创建');
},
mounted() {
console.log('Vue 实例已挂载，准备使用路由');
},
beforeRouteEnter(to, from, next) {
console.log('路由进入前');
next();
},
beforeRouteLeave(to, from, next) {
console.log('路由离开前');
next();
}
});
在上面的代码中，beforeRouteEnter 和 beforeRouteLeave 是 Vue Router 提供的钩子函数，允许我们在路由切换时进行特定的操作。
六、小结
生命周期钩子函数是 Vue 的核心特性之一，它使得我们可以在不同的阶段插入自定义逻辑，帮助我们控制组件的创建、更新和销毁过程。掌握生命周期钩子的使用，不仅可以让我们更好地组织代码，还可以让我们在不同的时机执行特定的操作，如数据初始化、事件处理、DOM 操作、清理资源等。
在本篇文章中，我们详细介绍了 Vue2 中常用的生命周期钩子函数及其应用场景。理解这些钩子函数的执行顺序和用途，将使你在 Vue 项目中更加得心应手，能在合适的时机完成相应的操作。
下一篇，我们将深入探讨 Vue2 中的自定义指令与插件开发，敬请期待！
