Vue2与Vue3生命周期函数全面解析：从入门到精通

Vue2与Vue3生命周期函数全面解析：从入门到精通

引言：生命周期的意义

想象一下，一个人的一生会经历出生、成长、成年、老年等不同阶段。Vue组件也是如此！生命周期函数就是Vue在组件"生命"的不同阶段给我们提供的"钩子"，让我们能在特定时刻插入自己的逻辑代码。

掌握生命周期函数，就像掌握了Vue组件的"人生剧本"，你可以：

• 在组件创建时初始化数据
• 在DOM挂载完成后操作DOM
• 在数据更新前后执行特定逻辑
• 在组件销毁前清理定时器或事件监听器

Vue2生命周期全景图

先来看Vue2的生命周期流程图：

开始↓
new Vue()实例化↓
beforeCreate → 实例刚创建，数据观测和事件配置之前↓
created → 实例创建完成，数据观测完成，但DOM未生成↓
beforeMount → 模板编译/挂载之前↓
mounted → 模板编译/挂载完成，DOM已生成↓
(数据变化时)
beforeUpdate → 数据更新，虚拟DOM重新渲染之前↓
updated → 数据更新，虚拟DOM重新渲染完成↓
(销毁时)
beforeDestroy → 实例销毁之前↓
destroyed → 实例销毁完成

Vue2生命周期详解

生命周期钩子	调用时机	常用场景
beforeCreate	实例初始化之后，数据观测(data observer)和event/watcher事件配置之前	可以在此加loading事件
created	实例创建完成，数据观测完成，但DOM未生成，$el属性还不存在	异步请求数据、初始化非响应式变量
beforeMount	在挂载开始之前被调用，相关的render函数首次被调用	很少使用，可以在服务端渲染时使用
mounted	el被新创建的vm.$el替换，并挂载到实例上后调用	操作DOM、初始化第三方库、设置定时器等
beforeUpdate	数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前	获取更新前的DOM状态
updated	数据更改导致的虚拟DOM重新渲染和打补丁后调用	操作更新后的DOM
beforeDestroy	实例销毁之前调用	清除定时器、取消事件监听、解绑自定义事件等清理工作
destroyed	实例销毁后调用	执行最后的清理操作

Vue2生命周期代码示例

new Vue({el: '#app',data() {return {message: 'Hello Vue!'}},beforeCreate() {// 实例刚创建，data和methods还未初始化console.log('beforeCreate:', this.message); // undefined},created() {// 实例创建完成，可以访问data和methodsconsole.log('created:', this.message); // 'Hello Vue!'// 适合发起异步请求获取数据},beforeMount() {// 模板编译完成，但尚未挂载到页面console.log('beforeMount:', document.getElementById('app').innerHTML); // 原始的HTML},mounted() {// 模板已挂载到页面，可以操作DOMconsole.log('mounted:', document.getElementById('app').innerHTML); // 包含Vue渲染的内容// 适合操作DOM或初始化第三方库},beforeUpdate() {// 数据更新前，DOM尚未重新渲染console.log('beforeUpdate:', document.getElementById('msg').textContent); // 旧值},updated() {// 数据更新后，DOM已重新渲染console.log('updated:', document.getElementById('msg').textContent); // 新值},beforeDestroy() {// 实例销毁前，此时实例仍然完全可用console.log('beforeDestroy');// 清除定时器、事件监听等},destroyed() {// 实例销毁后，所有绑定和监听都会被移除console.log('destroyed');}
})

Vue3生命周期变化

Vue3引入了Composition API，生命周期也发生了一些变化：

1. 名称变化：beforeDestroy改为beforeUnmount，destroyed改为unmounted
2. 组合式API：在setup()函数中使用生命周期需要导入并使用新的函数形式

Vue3生命周期全景图

开始↓
setup() → Composition API入口↓
beforeCreate → 同Vue2↓
created → 同Vue2↓
onBeforeMount → 挂载前↓
onMounted → 挂载完成↓
(数据变化时)
onBeforeUpdate → 更新前↓
onUpdated → 更新完成↓
(销毁时)
onBeforeUnmount → 卸载前(替代beforeDestroy)↓
onUnmounted → 卸载完成(替代destroyed)

Vue3生命周期对比表

Vue2选项式API	Vue3选项式API	Vue3组合式API	说明
beforeCreate	beforeCreate	-	在setup()之前执行
created	created	-	在setup()之后执行
beforeMount	beforeMount	onBeforeMount	组件挂载到DOM前调用
mounted	mounted	onMounted	组件挂载到DOM后调用
beforeUpdate	beforeUpdate	onBeforeUpdate	数据变化，DOM更新前调用
updated	updated	onUpdated	数据变化，DOM更新后调用
beforeDestroy	beforeUnmount	onBeforeUnmount	组件卸载前调用(Vue3改名)
destroyed	unmounted	onUnmounted	组件卸载后调用(Vue3改名)
-	-	onRenderTracked	调试钩子，响应式依赖被追踪时调用
-	-	onRenderTriggered	调试钩子，响应式依赖触发重新渲染时调用
errorCaptured	errorCaptured	onErrorCaptured	捕获子孙组件错误时调用

Vue3生命周期代码示例

选项式API (类似Vue2)

export default {data() {return {count: 0}},// 选项式API生命周期钩子beforeCreate() {console.log('beforeCreate')},created() {console.log('created')},beforeMount() {console.log('beforeMount')},mounted() {console.log('mounted')},beforeUpdate() {console.log('beforeUpdate')},updated() {console.log('updated')},beforeUnmount() {  // Vue3中将beforeDestroy改名为beforeUnmountconsole.log('beforeUnmount')},unmounted() {      // Vue3中将destroyed改名为unmountedconsole.log('unmounted')}
}

组合式API

import { onBeforeMount, onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,ref 
} from 'vue'export default {setup() {const count = ref(0)// 组合式API生命周期函数onBeforeMount(() => {console.log('onBeforeMount')})onMounted(() => {console.log('onMounted')})onBeforeUpdate(() => {console.log('onBeforeUpdate')})onUpdated(() => {console.log('onUpdated')})onBeforeUnmount(() => {console.log('onBeforeUnmount')})onUnmounted(() => {console.log('onUnmounted')})return {count}}
}

生命周期最佳实践

1. 数据请求：通常放在created(Vue2)或setup中的onMounted(Vue3)中

   • 服务端渲染(SSR)用created/setup
   • 客户端渲染用mounted/onMounted

2. DOM操作：必须在mounted/onMounted之后进行，因为只有这时DOM才渲染完成

3. 清理工作：在beforeDestroy/beforeUnmount或destroyed/unmounted中清除定时器、事件监听等

4. 避免在updated中修改状态：这可能导致无限更新循环

5. 性能优化：在beforeUpdate中可以获取更新前的DOM状态，用于动画等场景

常见问题解答

Q: Vue3中为什么改名beforeDestroy和destroyed？
A: 为了更准确地描述组件生命周期阶段。"destroy"听起来像是完全摧毁，而实际上只是卸载(unmount)组件实例。

Q: setup()和created哪个先执行？
A: 在Vue3中，执行顺序是：setup() → beforeCreate → created。setup()是最先执行的。

Q: 可以在同一个组件中混用选项式API和组合式API的生命周期吗？
A: 可以，但同名钩子会合并执行，组合式API的钩子会在选项式API之前调用。

Q: 为什么Vue3的组合式API没有beforeCreate和created对应的钩子？
A: 因为setup()函数本身就是在组件创建阶段执行的，你可以直接把原本放在created中的代码放在setup()中。

总结

理解Vue生命周期是掌握Vue开发的关键。通过本文的对比学习，你应该已经清楚：

1. Vue2和Vue3生命周期的对应关系
2. 选项式API和组合式API生命周期的不同写法
3. 各个生命周期钩子的适用场景
4. Vue3中生命周期的主要变化

记住这张简化的生命周期流程图，开发时就能游刃有余：

创建阶段：setup → beforeCreate → created → beforeMount → mounted
更新阶段：beforeUpdate → updated
卸载阶段：beforeUnmount → unmounted

现在，你已经掌握了Vue组件的"人生剧本"，快去编写属于你的精彩"剧情"吧！