Vue3 生命周期深度解析与实践总结

Vue 3 相比 Vue 2 在生命周期上做了一些重要的优化与调整，尤其是在 Composition API 的引入之后，使得开发者能够以更灵活的方式控制组件的生命周期逻辑。本文将从 Vue 3 生命周期的基础出发，深入剖析其原理、使用场景以及最佳实践，帮助开发者构建更加健壮的 Vue 应用。

一、生命周期概述

在 Vue 3 中，我们依然可以使用两种方式编写生命周期逻辑：

• Options API（选项式写法）

• Composition API（组合式写法）

这两种方式可以共存，但推荐在 Vue 3 中优先使用 Composition API，以便更好地组织复杂逻辑。

Vue 3 生命周期流程图

---

二、Options API 生命周期钩子一览

生命周期钩子	说明
beforeCreate	实例初始化之后，数据观测和事件配置之前
created	实例已创建完成，数据已响应式，DOM 未生成
beforeMount	DOM 挂载之前调用
mounted	DOM 挂载完成后调用
beforeUpdate	数据更新触发 DOM 重新渲染前
updated	DOM 重新渲染完成后
beforeUnmount	组件卸载前调用
unmounted	组件卸载完成后调用

---

三、Composition API 中的生命周期函数

Vue 3 提供了一组新的生命周期函数，用于在 setup() 函数中使用：

函数名	等价 Options API
onBeforeMount	beforeMount
onMounted	mounted
onBeforeUpdate	beforeUpdate
onUpdated	updated
onBeforeUnmount	beforeUnmount
onUnmounted	unmounted
onActivated	<keep-alive> 组件激活时调用
onDeactivated	<keep-alive> 组件失活时调用
onErrorCaptured	捕获子组件错误
onRenderTracked	响应式追踪调试用
onRenderTriggered	响应式触发调试用

使用示例

<script setup> 
import { onMounted, onBeforeUnmount } from 'vue' 
onMounted(() => { 
    console.log('组件已挂载') 
}) 
onBeforeUnmount(() => { 
    console.log('组件即将卸载') 
}) 
</script>

---

四、生命周期钩子的应用场景

1. 数据请求

onMounted(() => { fetchData() })

在组件加载后立即获取后端数据。

2. 清除副作用

let intervalId = null 
onMounted(() => { 
        intervalId = setInterval(() => { 
        console.log('执行定时任务') 
    }, 1000) 
}) 
onBeforeUnmount(() => { clearInterval(intervalId) })

适用于定时器、订阅等清理逻辑。

3. 响应式调试（开发阶段使用）

import { onRenderTracked, onRenderTriggered } from 'vue'

onRenderTracked(e => {
  console.log('追踪响应式依赖：', e)
})

onRenderTriggered(e => {
  console.log('触发响应式更新：', e)
})

---

五、Vue 3 生命周期注意事项

1. setup() 函数中不能使用 Options API 生命周期钩子；

2. 生命周期函数的执行顺序是由父组件到子组件；

3. setup() 函数本身不等同于 created，它更早执行；

4. 如果使用 <script setup>，生命周期函数不需要额外引入组件实例；

5. 在 SSR（服务器端渲染）中，某些生命周期（如 onMounted）不会被调用。

---

六、实战经验总结

• 使用 onMounted 替代 mounted 可以让逻辑更集中在 setup 中；

• 所有副作用（如事件绑定、定时器等）建议在 onBeforeUnmount 清理；

• 在大型项目中，建议将生命周期逻辑模块化成 composable 函数，例如：

// useWebSocket.js
export function useWebSocket(url) {
  let ws

  onMounted(() => {
    ws = new WebSocket(url)
  })

  onBeforeUnmount(() => {
    ws?.close()
  })

  return {
    ws
  }
}

---

七、对比 Vue 2 和 Vue 3 生命周期的差异

项目	Vue 2	Vue 3（Composition API）
写法风格	Options API	Composition API
生命周期钩子命名	created 等	onCreated（已移除）等
setup 时机	不存在	在 beforeCreate 之前执行
更灵活的组织方式	不便复用	可组合、可抽离逻辑