Vue3 组合式 API 最佳实践指南

李增苗 2025-12-15 约 8 分钟
Vue3 组合式 API

Vue3 的组合式 API（Composition API）是 Vue 框架的一次重大升级，它提供了一种全新的方式来组织和复用组件逻辑。本文将深入探讨其最佳实践，帮助你写出更优雅的代码。

为什么选择组合式 API

在 Vue2 中，我们使用选项式 API 来组织代码。随着组件变得复杂，相关的逻辑代码分散在不同的选项（data、methods、computed、watch）中，导致维护困难。

组合式 API 的核心优势在于：按照逻辑关注点组织代码，而不是按照选项类型。

这意味着，一个功能的所有相关代码可以放在一起，而不是分散在组件的各个选项中。这种组织方式在大型组件中尤其有价值。

基础用法

让我们从一个简单的例子开始，了解 setup 函数和响应式 API 的基本用法：

import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    return { count, doubled, increment }
  }
}

组合式函数（Composables）

组合式 API 最强大的特性之一就是组合式函数。通过它，我们可以将有状态的逻辑提取到独立的函数中，实现跨组件复用。

// useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  function increment() { count.value++ }
  function decrement() { count.value-- }
  function reset() { count.value = initialValue }
  
  return { count, increment, decrement, reset }
}

实践建议

  • 每个组合式函数只关注一个逻辑关注点
  • 命名以 use 开头，如 useCounter、useFetch
  • 始终返回 ref 而不是 reactive 对象
  • 处理好清理逻辑，避免内存泄漏
  • 提供清晰的 TypeScript 类型定义

script setup 语法糖

Vue3.2 引入了 <script setup> 语法糖，让组合式 API 的使用更加简洁：

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

const { count, increment } = useCounter(10)
const message = ref('Hello Vue3!')
const upperMessage = computed(() => message.value.toUpperCase())
</script>

使用 script setup 后，所有顶层的绑定都会自动暴露给模板，无需手动 return。代码量减少了约 40%，同时获得了更好的 TypeScript 类型推导。

性能优化

合理使用 shallowRef、shallowReactive 可以减少深层响应式转换的开销。对于大型列表数据，这一点尤为重要。

同时，善用 watchEffect 的清理函数和 computed 的缓存特性，可以避免不必要的重复计算。

总结

组合式 API 为 Vue 开发带来了更灵活的代码组织方式。掌握这些最佳实践，能让你的 Vue3 项目更加健壮、可维护。记住，好的代码是写给人看的，恰好机器也能执行。

返回首页