Vue 3 核心语法解析：为什么组合式 API 比选项式 API更好用？

1. 前言：Vue 3 带来的新时代

随着前端技术的迭代，Vue 3 已经成为了目前的主流选择。官方推出的新脚手架 create-vue 底层切换到了 Vite，为我们带来了毫秒级的开发响应速度。

但除了快，Vue 3 最大的颠覆性改变在于它引入了 组合式 API (Composition API)。很多从 Vue 2 迁移过来的开发者可能会问：“原来的 Options API 写得好好的，为什么要换？”

本文将通过代码对比和核心语法解析，告诉你为什么组合式 API 是更好的选择。

2. 直观体验：从 Counter 案例看代码进化

一切解释都不如代码来得直观。让我们通过一个简单的计数器（Counter）功能，看看 Vue 2 和 Vue 3 的写法差异。

Vue 2 (Options API)

在 Vue 2 中，我们需要将逻辑拆分到 data 和 methods 中：

<script>
export default {
  data(){
    return {
      count: 0
    }
  },
  methods:{
    addCount(){
      this.count++
    }
  }
}
</script>

Vue 3 (Composition API + setup 语法糖)

在 Vue 3 中，借助 <script setup>，代码变成了这样：

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

const count = ref(0)
const addCount = () => count.value++
</script>

第一印象总结：

1. 代码量骤减：去掉了 export default、return 对象等样板代码，专注于业务逻辑。
2. 逻辑集中：数据和修改数据的方法直接定义在一起，不再割裂。

3. 深度解析：为什么“组合式”更胜一筹？

3.1 逻辑组织的变革

• Vue 2 的痛点（关注点分离）：在开发大型组件时，一个功能的逻辑往往分散在 data、methods、watch 和生命周期钩子中。维护代码时，我们需要在几百行代码中反复“横跳”。
• Vue 3 的优势（集中式维护）：在 setup 中，我们可以将同一个业务功能的变量、方法、侦听器写在一起。这种“高内聚”的代码组织方式，让代码阅读和维护变得异常轻松。

3.2 <script setup> 语法糖的极致体验

Vue 3 早期需要使用 setup() 函数并手动 return 数据才能在模板中使用，写法较为繁琐。

强烈推荐使用 <script setup> 语法糖，它带来了质的飞跃：

• 无需 return：顶层定义的变量、函数，在模板中自动可用。
• 无需注册组件：引入的子组件直接在模板使用，无需 components: {} 注册。
• 更符合直觉：代码看起来更像标准的 JavaScript 脚本。

<script setup>
  const message = 'this is message'
  const logMessage = () => console.log(message)
</script>

4. 核心语法避坑与最佳实践

4.1 响应式数据的选择：ref vs reactive

Vue 3 提供了两种创建响应式数据的方法，很多初学者容易纠结。

• reactive：
  • 只能接收对象类型。
  • 缺点：不能处理简单类型；解构后会丢失响应性。
• ref：
  • 接收简单类型或对象。
  • 缺点：在 JS 中访问需要 .value。
  • 优点：稳健，不易出错，支持所有类型。

最佳实践建议：
使用 ref 函数。
它可以减少记忆负担。在实际企业级项目（如小兔鲜项目）中，通常推荐全量使用 ref。

4.2 更强大的 watch 与 computed

• Computed：变成了函数式调用，更简洁。
• Watch：支持以数组形式同时侦听多个数据源。

避坑提示（Deep Watch）：
当你使用 watch 监听一个由 ref 定义的对象时，默认是浅层监听的。直接修改对象内部属性不会触发回调。
解决办法：开启 { deep: true } 选项。

const state = ref({ count: 0 })
// 需要开启 deep 才能监听到 count 的变化
watch(state, () => { console.log('变化了') }, { deep: true })

4.3 生命周期的映射

组合式 API 中的生命周期钩子更灵活，可以多次调用，按顺序执行。

Vue 2 (Options API)	Vue 3 (Composition API)
beforeCreate / created	setup (无需专门钩子)
mounted	onMounted
beforeDestroy	onBeforeUnmount

5. 组件通信的现代化

Vue 3 在保持原有通信逻辑的基础上，让写法更流畅。

1. 父子通信：使用 defineProps 接收数据，defineEmits 触发事件。
2. 跨层级通信 (Provide / Inject)：
   • 这是 Composition API 的一大亮点。
   • 技巧：在 provide 时传递一个 ref 对象，子组件 inject 接收后，依然保持响应式。这实现了一个简易的跨组件状态共享。
3. 模板引用与暴露 (defineExpose)：
   • 在 <script setup> 中，组件默认是封闭的（父组件无法通过 ref 访问子组件内部属性）。
   • 必须通过 defineExpose 显式抛出属性或方法，这比 Vue 2 默认全暴露更加安全。

6. 总结与实战资源

Vue 3 的组合式 API 不仅仅是语法的升级，更是代码组织思维的重构。它让我们的代码逻辑更紧凑、复用更简单（Hook 编程）、类型推导更友好。

如果你还在犹豫，现在就是拥抱 Vue 3 的最好时机。

为了方便大家对照练习，案例已整理至 Gitee 仓库：

• 项目地址：https://gitee.com/chentongxue6267/vue3-concept-demo

• 分支说明：

  • main 分支：项目初始化骨架，建议由此开始跟随文章练习。
  • complete 分支：包含完整功能的代码，卡壳时可参考。

• 克隆命令：

  git clone https://gitee.com/chentongxue6267/vue3-concept-demo.git

---

感谢阅读！有问题可以随时提问！