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生命周期详解

Vue2生命周期代码示例

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  beforeCreate() {
    // 实例刚创建，data和methods还未初始化
    console.log('beforeCreate:', this.message); // undefined
  },
  created() {
    // 实例创建完成，可以访问data和methods
    console.log('created:', this.message); // 'Hello Vue!'
    // 适合发起异步请求获取数据
  },
  beforeMount() {
    // 模板编译完成，但尚未挂载到页面
    console.log('beforeMount:', document.getElementById('app').innerHTML); // 原始的HTML
  },
  mounted() {
    // 模板已挂载到页面，可以操作DOM
    console.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生命周期对比表

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改名为beforeUnmount
    console.log('beforeUnmount')
  },
  unmounted() {      // Vue3中将destroyed改名为unmounted
    console.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组件的"人生剧本"，快去编写属于你的精彩"剧情"吧！