Vue3 Composition API 实战指南

从 setup 语法糖到自定义 Hook，全面梳理组合式 API 的最佳实践。

为什么选择组合式 API

Vue2 的选项式 API 在组件逻辑复杂时，相关代码会被分散到不同的选项中（data、methods、computed、watch），导致维护困难。组合式 API 解决了这个问题——它允许我们按照逻辑关注点来组织代码。

// 选项式 API：同一个功能的代码分散在不同位置
export default {
  data() { return { count: 0 } },
  computed: { double() { return this.count * 2 } },
  methods: { increment() { this.count++ } }
}

// 组合式 API：同一个功能的代码放在一起
const count = ref(0)
const double = computed(() => count.value * 2)
const increment = () => count.value++

setup 语法糖

<script setup> 是 Vue 3.2 引入的编译时语法糖，相比普通 setup 函数更简洁：

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

const count = ref(0)
const double = computed(() => count.value * 2)
</script>

<template>
  <p>{{ count }} x 2 = {{ double }}</p>
  <button @click="count++">+1</button>
</template>

几个注意点：

• 导入的组件可以直接在模板中使用，无需注册
• defineProps、defineEmits 是编译器宏，不需要导入
• 顶层声明的变量和函数会自动暴露给模板

自定义 Hook（组合式函数）

组合式 API 最强大的能力之一是提取和复用逻辑。约定以 use 开头命名：

// useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const update = (e) => {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}

使用时非常简洁：

<script setup>
import { useMousePosition } from './useMousePosition'

const { x, y } = useMousePosition()
</script>

响应式原理小结

• ref() 用于基本类型，通过 .value 访问
• reactive() 用于对象类型，直接访问属性
• computed() 创建计算属性，自动缓存
• watch() 和 watchEffect() 用于侦听副作用

实践建议：优先使用 ref，它更显式且不会丢失响应性。

总结

组合式 API 是 Vue3 的核心特性，掌握它可以显著提升代码的可维护性和复用性。建议在新项目中全面采用 <script setup> 语法，并养成提取自定义 Hook 的习惯。