Vue3 的 Composition API 中的生命周期钩子：与 Options API 有何不同？

1. 初识Vue3组合式API（技术栈：Vue3）

当我们翻开Vue3的技术手册，映入眼帘的<script setup>语法和ref、reactive这些新朋友，标志着Vue开发模式正在经历从"选项式组织"到"组合式编程"的进化。这种范式转变不仅改变了代码组织方式，更将生命周期的使用体验带入了新的维度。

<!-- Options API组件模板 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return { message: 'Hello World' }
  },
  mounted() {
    console.log('传统方式挂载完成')
  }
}
</script>

在这个传统示例中，生命周期的使用就像在超市货架上取商品——必须按照指定的区域（methods、data等选项）存放逻辑片段，当组件变得复杂时，相关功能的代码就会散落在不同选项区块。

2. 生命周期革命：两种API的实现对比

2.1 Options API的生命周期布局

传统Options API通过组件选项声明生命周期，每个钩子都是独立的方法：

export default {
  beforeCreate() { /* 初始化前 */ },
  created() { /* 初始化后 */ },
  beforeMount() { /* 挂载前 */ },
  mounted() { /* 界面可见 */ },
  beforeUpdate() { /* 数据变更前 */ },
  updated() { /* DOM更新后 */ },
  beforeUnmount() { /* 组件卸载前 */ },
  unmounted() { /* 组件销毁后 */ }
}

这种组织方式使得相关逻辑分散在不同位置，例如数据初始化和事件监听往往需要在created和mounted之间来回跳跃。

2.2 Composition API的全新范式

在setup函数中，我们可以通过导入Hook函数实现生命周期管理：

<script setup>
import { onMounted, onUpdated } from 'vue'

// 业务逻辑A
const initFeatureA = () => {
  onMounted(() => {
    console.log('功能A初始化')
  })
}

// 业务逻辑B 
const initFeatureB = () => {
  onMounted(() => {
    console.log('功能B初始化')
  })
}

// 组合使用
initFeatureA()
initFeatureB()
</script>

这种模式打破了传统生命周期的物理隔离，允许将相关功能的生命周期操作集中管理。特别是多个onMounted的存在，实现了关注点分离的代码组织。

3. 双模对照实战：用户信息组件开发

3.1 Options API实现方案

<script>
export default {
  data() {
    return {
      user: null,
      loading: false
    }
  },
  created() {
    this.loadUserData()
  },
  methods: {
    async loadUserData() {
      this.loading = true
      try {
        const res = await fetch('/api/user')
        this.user = await res.json()
      } finally {
        this.loading = false
      }
    }
  },
  beforeUnmount() {
    console.log('准备清除定时器')
  }
}
</script>

在这里，数据加载必须在created阶段启动，而清除操作则放在组件生命周期的末尾。当需要增加性能监控代码时，开发人员需要在多个生命周期钩子之间来回修改。

3.2 Composition API重构版本

<script setup>
import { ref, onMounted, onServerPrefetch } from 'vue'

const user = ref(null)
const loading = ref(false)

// 数据获取逻辑
const fetchUser = async () => {
  loading.value = true
  try {
    const response = await fetch('/api/user')
    user.value = await response.json()
  } finally {
    loading.value = false
  }
}

// 生命周期配置
onMounted(fetchUser)
onServerPrefetch(fetchUser)  // SSR场景专用钩子

// 辅助功能
const initAnalytics = () => {
  const timer = setInterval(() => {
    console.log('活动状态检测')
  }, 5000)
  
  onUnmounted(() => {
    clearInterval(timer)
    console.log('分析模块已卸载')
  })
}

initAnalytics()
</script>

重构后的版本展示了几个显著优势：相关逻辑聚合成独立函数、支持SSR专用钩子、可自由组合生命周期操作。特别值得注意的是，定时器的创建和清除被封装在同一个代码块中，极大地提升了可维护性。

4. 深度解析特性差异

4.1 执行顺序的微妙差异

当混合使用两种API时，生命周期触发顺序呈现特定规律：

// Composition API示例
setup() {
  onBeforeMount(() => console.log('C-beforeMount'))
}

// Options API示例
{
  beforeMount() { console.log('O-beforeMount') }
}

// 控制台输出顺序：
// C-beforeMount 
// O-beforeMount

这种顺序意味着Composition API的钩子会先于Options API的同阶段钩子执行，这在迁移现有项目时需要特别注意时序问题。

4.2 异步操作的革命性支持

<script setup>
import { onMounted } from 'vue'

onMounted(async () => {
  const data = await fetchData()
  console.log('异步加载完成:', data)
})
</script>

Composition API原生支持异步生命周期函数，配合async/await语法实现流畅的异步操作，彻底解决了传统方式中需要在生命周期内调用异步方法的繁琐问题。

5. 适用场景决策树

5.1 推荐采用Composition API的场景

• 需要逻辑复用的复杂组件（如表单验证系统）
• 涉及多个生命周期阶段的交互功能（如页面埋点系统）
• 大型项目的模块化开发（状态管理模块）
• SSR项目开发（利用专用服务端钩子）

5.2 保留Options API的适用场景

• 简单展示型组件（统计卡片）
• 遗留项目维护（逐步迁移策略）
• 原型快速开发（避免架构复杂性）
• 小型工具类组件（简单弹窗）

6. 选择的技术得失

优势对比：

注意事项清单：

1. 禁止在条件语句中动态注册Hook函数
2. 注意新旧API混用时的执行顺序
3. 使用onServerPrefetch时确保SSR环境
4. 在Vite项目中注意Hook函数的自动导入配置
5. 组合式函数应该使用use前缀命名

7. 真实案例：复杂仪表盘开发

让我们通过一个数据仪表板的案例，观察两种API在复杂场景下的表现差异：

7.1 Options API实现痛点

<script>
export default {
  data() {
    return {
      chartData: [],
      realtimeData: []
    }
  },
  mounted() {
    this.initChart()
    this.startWSConnection()
  },
  methods: {
    initChart() {
      // 图表初始化逻辑
    },
    startWSConnection() {
      // WebSocket连接管理
    }
  },
  beforeUnmount() {
    this.cleanupWS()
  },
  destroyed() {
    // 额外的清除逻辑
  }
}
</script>

当需要增加数据缓存功能时，开发者必须在created添加初始化代码，在destroyed添加清除代码，逻辑片段被迫分散。

7.2 Composition API重构方案

<script setup>
import { useChart, useRealtime } from './dashboardHooks'

// 图表逻辑封装
const { chartData, initChart } = useChart()

// 实时数据模块
const { realtimeData, connectWS } = useRealtime()

onMounted(() => {
  initChart('#chartContainer')
  connectWS('wss://api.example.com')
})
</script>

通过自定义Hook函数，将图表管理和WebSocket连接封装为独立模块。每个模块内部管理自己的生命周期依赖，主组件只需进行模块组合。

8. 未来发展趋势预测

随着Vue 3.3版本推出defineOptions等强化API，我们可以看到组合式模式正在持续进化：

• 更好的TypeScript智能提示
• 与VueUse生态更深度整合
• 生命周期函数的颗粒化细分
• 服务端渲染场景的专用Hook扩展