Vue 教程：组合式 API 与选项式 API 的深度对比与迁移指南

快速概述

Vue 作为渐进式框架，通过尽可能简单的 API 实现响应式数据绑定和组合视图组件。选项式 API（Options API）是 Vue 2 中广泛使用的编码风格，而 Vue 3 新增了组合式 API（Composition API）。本教程解决的核心问题是：在 Vue 3 项目中如何选择两种 API，以及如何将现有选项式代码平滑迁移到组合式。适用场景包括新项目初始化、旧项目升级、逻辑复用与代码组织优化。前置环境要求：Node.js 与 npm，建议使用 Vue CLI 创建项目。

核心概念与原理

选项式 API 将组件逻辑按选项分组，核心选项包括 data、methods、computed、watch、props 和生命周期钩子。data 返回响应式数据对象，methods 定义方法，computed 创建依赖其他数据的计算属性，watch 监听数据变化并执行回调。组合式 API 则按逻辑关注点组织代码，通过 setup 函数或 <script setup> 语法，将相关状态、计算属性和方法集中在一起，便于跨组件复用。其核心机制是响应式系统：当依赖的数据变化时，视图自动更新。

实战步骤与代码

步骤 1：创建 Vue 项目

# 创建新项目
vue create vue-demo
进入项目目录
cd vue-demo
启动开发服务器
npm run serve

以上命令基于 Vue CLI。若使用 Vite，可运行 npm create vue@latest。

步骤 2：选项式 API 示例

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  watch: {
    fullName(newVal, oldVal) {
      console.log(`姓名从 ${oldVal} 变为 ${newVal}`)
    }
  },
  methods: {
    sayHello() {
      console.log('Hello Vue')
    }
  }
}
</script>

data 中的属性可在模板中通过 {{ firstName }} 使用。

步骤 3：迁移到组合式 API

<script setup>
import { ref, computed, watch } from 'vue'
// 响应式状态 const firstName = ref('John') const lastName = ref('Doe')
// 计算属性 const fullName = computed(() => firstName.value + ' ' + lastName.value)
// 监听变化 watch(fullName, (newVal, oldVal) => { console.log(`姓名从 ${oldVal} 变为 ${newVal}`) })
// 方法 function sayHello() { console.log('Hello Vue') } </script>

组合式 API 将相关逻辑聚合，提升可读性与复用性。

常见坑点与优化

• 响应式丢失：在组合式 API 中，直接解构 ref 会失去响应性，应使用 .value 或 toRefs。
• this 指向：选项式 API 中 methods 内的 this 指向组件实例，组合式 API 中需使用变量引用。
• 生命周期差异：组合式 API 使用 onMounted 等钩子，替代选项式的 mounted。
• 性能优化：合理使用 computed 缓存，避免在模板中执行复杂计算；使用 v-show 替代频繁切换的 v-if。

总结

组合式 API 提供了更灵活的逻辑组织方式，适合复杂组件；选项式 API 结构清晰，适合简单场景。迁移时逐步替换，并注意响应式与生命周期差异。