Vue 3 Composition API 最佳实践

2024年1月12日6 分钟阅读前端开发

为什么选择 Composition API

Composition API 通过函数组合拆分逻辑，让跨组件复用与单测更简单；同时与 TypeScript 更契合，利于类型推断与约束。

基础用法

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

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

function inc(){ count.value++ }

onMounted(() => console.log('mounted'))
</script>

<template>
  <button @click="inc">{{ double }}</button>
</template>

提取可复用逻辑

// useMouse.ts
import { ref, onMounted, onUnmounted } from 'vue'
export function useMouse(){
  const x = ref(0), y = ref(0)
  const move = (e: MouseEvent) => { x.value = e.pageX; y.value = e.pageY }
  onMounted(() => window.addEventListener('mousemove', move))
  onUnmounted(() => window.removeEventListener('mousemove', move))
  return { x, y }
}

性能与可维护性

按需响应：避免为大对象深层响应式，可用 shallowRef/markRaw。
只读暴露：通过 readonly 暴露状态，防止外部误改。
解耦依赖：使用 provide/inject 传递跨层数据，避免层层 props。

总结

在复杂组件中优先使用 Composition API，结合组合式函数沉淀领域能力；在简单组件保留 Options API，保持心智与迁移成本可控。