目录
- 1 Vue的生命周期概念
- 2 Vue的生命周期钩子
- 3 业务场景中的生命周期钩子应用
- 初始化数据和依赖资源
- DOM操作
- 数据变化时的副作用处理
- 组件销毁时清理资源
- keep-alive组件的激活和停用
- 错误捕获和处理
- 4 容易忽视的细节
- 5 结语
- 6 参考
大家好，我是喵喵侠。Vue.js是一个渐进式JavaScript框架，用于构建用户界面。为了更好地管理组件的创建、更新和销毁，Vue提供了一系列的生命周期钩子函数。这些钩子函数让我们能够在组件的不同阶段执行特定的操作，从而实现更复杂和高效的业务逻辑管理。在Vue.js的项目开发过程中，经常会用到各种生命周期钩子函数，合理的使用对应的钩子，可以有效的进行业务功能开发。下面我将为你介绍Vue.js的生命周期，以及具体业务场景的实际应用。
1 Vue的生命周期概念
Vue的生命周期是指从组件实例创建到销毁的整个过程，包括初始化、挂载、更新和销毁四个主要阶段。在每个阶段，Vue都会触发特定的生命周期钩子函数，允许开发者在这些钩子中执行自定义逻辑。
下面可以用一张图，来很直观的看到生命周期的运行全过程：
英文不好的同学，可以看下面的翻译中文图解：
2 Vue的生命周期钩子
- beforeCreate：实例初始化之后，数据观测(data observer)和事件(event/watcher)配置之前被调用。在这个阶段，无法访问
data、computed、methods等属性。 - created：实例创建完成后被调用。在这个阶段，实例已经完成了数据观测、属性和方法的运算，事件/事件回调的配置。不过，挂载阶段尚未开始，
$el属性还不可用。 - beforeMount：在挂载开始之前被调用：相关的
render函数首次被调用。在这个阶段，组件还没有被挂载到DOM中。 - mounted：el被新创建的
vm.$el替换，并挂载到实例上去之后调用该钩子。在这个阶段，组件已经被挂载到DOM中，$el属性已经可用。 - beforeUpdate：当数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。在这个阶段，可以进一步地更改状态，不会触发重渲染过程。
- updated：由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。在这个阶段，组件DOM已经更新，因此可以执行依赖于DOM的操作。
- beforeDestroy：在实例销毁之前调用。在这个阶段，实例仍然完全可用。
- destroyed：Vue实例销毁后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。
- activated：
keep-alive组件激活时调用。此钩子在组件被从缓存中激活时调用。 - deactivated：
keep-alive组件停用时调用。此钩子在组件被缓存时调用。 - errorCaptured：当捕获一个来自子孙组件的错误时被调用。这个钩子可以用来捕获和处理错误。
3 业务场景中的生命周期钩子应用
初始化数据和依赖资源
在业务场景中，初始化数据是一个常见需求。我们可以在created钩子中进行数据的初始化，因为此时数据观测已经完成，实例已经可以访问data、computed和methods等属性。
created() {
this.fetchInitialData();
},
methods: {
fetchInitialData() {
// 执行异步操作获取数据
axios.get('/api/data').then(response => {
this.data = response.data;
});
}
}如果需要在created钩子中操作DOM，可以使用this.$nextTick来确保在DOM更新后执行。
created() {
this.fetchInitialData();
this.$nextTick(() => {
this.initializePlugin();
});
},
methods: {
initializePlugin() {
// 初始化DOM相关的插件
new Plugin(this.$el);
}
}DOM操作
在需要直接操作DOM的场景下，可以在mounted钩子中进行，因为此时组件已经挂载到DOM中，$el属性可用。
mounted() {
this.initializeCarousel();
},
methods: {
initializeCarousel() {
// 初始化轮播图插件
new Carousel(this.$el.querySelector('.carousel'));
}
}数据变化时的副作用处理
当数据变化时需要进行一些副作用处理，可以在updated钩子中进行。但需要注意避免在updated中进行可能引发再次更新的数据变更操作，以避免无限循环。
updated() {
this.handleDOMChanges();
},
methods: {
handleDOMChanges() {
// 处理DOM更新后的操作
console.log('DOM updated');
}
}组件销毁时清理资源
在组件销毁时，需要清理定时器、取消订阅事件或断开WebSocket连接。以下是一个具体的业务场景，例如一个实时通话页面的定时器和事件监听器清理。
代码语言：typescript复制data() {
return {
callTimer: null
};
},
created() {
this.startCallTimer();
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
clearInterval(this.callTimer);
window.removeEventListener('resize', this.handleResize);
},
methods: {
startCallTimer() {
this.callTimer = setInterval(() => {
this.updateCallDuration();
}, 1000);
},
handleResize() {
// 处理窗口调整大小
console.log('Window resized');
}
}keep-alive组件的激活和停用
activated和deactivated钩子主要用于<keep-alive>组件，用于处理在不同的Tab切换时的数据和状态恢复。
activated() {
this.refreshData();
},
deactivated() {
this.saveScrollPosition();
},
methods: {
refreshData() {
// 刷新数据
console.log('Component activated');
},
saveScrollPosition() {
// 保存滚动位置
console.log('Component deactivated');
}
}错误捕获和处理
errorCaptured钩子用于捕获和处理子组件中的错误，尤其在复杂应用中非常有用。
errorCaptured(err, vm, info) {
console.error('Error captured:', err, info);
// 发送错误信息到监控服务
sendErrorReport(err, info);
// 返回 false 以阻止错误向上传播
return false;
}4 容易忽视的细节
- 避免在**
beforeCreate**和**created**中访问DOM：在这些钩子中，组件还未挂载到DOM上，因此不能进行DOM操作，当然你可以使用this.$nextTick()来操作。 - 谨慎使用**
beforeUpdate**和**updated**钩子：避免在这些钩子中直接更改数据，因为这可能会导致无限循环更新。 - 异步操作的清理：在组件销毁时，确保清理所有的异步操作，以避免内存泄漏或其他潜在问题。
- 生命周期钩子的执行顺序：理解钩子的执行顺序有助于编写更加清晰和合理的代码。例如，如果你需要在组件挂载前进行一些数据准备工作，可以在
beforeMount中执行，而不是在created中。
5 结语
Vue的生命周期钩子为我们提供了在不同阶段执行特定操作的机会。在实际业务场景中，合理利用这些钩子可以提高代码的可维护性和性能。通过了解每个钩子的作用和最佳实践，我们可以更高效地管理组件的状态和行为，确保应用程序运行顺畅。希望本文对你在实际项目中使用Vue生命周期有所帮助。
6 参考
Vue 实例 — Vue.js
Vue生命周期 - 王叨叨
