【Vue 3组合式API：告别“面条代码”的响应式编程实践】

Vue 3组合式API：告别“面条代码”的响应式编程实践

引言：为什么需要组合式API？
在Vue 2时代，选项式API（Options API）通过data、methods、computed等固定区块组织代码，但随着组件复杂度上升，同一功能的逻辑往往分散在不同区块，形成难以维护的“面条代码”。Vue 3的组合式API（Composition API）通过逻辑关注点组织代码，彻底改变了这一局面。

一、组合式API vs 选项式API：直观对比
场景：一个TodoList组件
Vue 2选项式实现

export default {
  data() {
    return {
      todos: [],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ text: this.newTodo, done: false })
      this.newTodo = ''
    },
    deleteTodo(index) {
      this.todos.splice(index, 1)
    }
  },
  computed: {
    pendingTodos() {
      return this.todos.filter(todo => !todo.done)
    }
  }
}

痛点：新增功能时需在多个区块跳转修改。

Vue 3组合式实现

import { ref, computed } from 'vue'

export default {
  setup() {
    const todos = ref([])
    const newTodo = ref('')

    const pendingTodos = computed(() => 
      todos.value.filter(todo => !todo.done)
    )

    function addTodo() {
      todos.value.push({ text: newTodo.value, done: false })
      newTodo.value = ''
    }

    function deleteTodo(index) {
      todos.value.splice(index, 1)
    }

    return { todos, newTodo, pendingTodos, addTodo, deleteTodo }
  }
}

优势：同一功能的响应式数据、计算属性和方法聚合在一起，支持逻辑复用。

二、组合式API的三大核心武器

1. ref() 与 reactive()
   ref：包装基本类型为响应式对象（通过.value访问）

reactive：直接创建响应式对象（适合复杂数据结构）

const count = ref(0) // { value: 0 }
const state = reactive({ count: 0 }) // 直接操作state.count

2. computed 与 watch
   计算属性自动追踪依赖

侦听器支持深度监听和立即执行

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

watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`)
}, { immediate: true })

3. 自定义Hook：逻辑复用的终极方案
   将业务逻辑提取为独立函数：

// useTodoList.js
export function useTodoList() {
  const todos = ref([])
  // 添加、删除方法...
  return { todos, addTodo, deleteTodo }
}

// 组件中使用
import { useTodoList } from './useTodoList'
export default {
  setup() {
    const { todos, addTodo } = useTodoList()
    return { todos, addTodo }
  }
}

三、组合式API的最佳实践
单一职责原则：每个setup函数只处理一个主要功能

类型推导友好：搭配TypeScript实现完美类型提示

状态管理进阶：复杂场景结合Pinia替代Vuex

生命周期迁移：onMounted、onUpdated等替代旧版钩子

四、何时应该使用组合式API？
大型项目需要更好的代码组织

需要跨组件复用逻辑

团队具备一定的函数式编程基础

需要TypeScript深度支持

结语：拥抱响应式编程的未来
组合式API不是对选项式API的否定，而是提供了更强大的代码组织能力。通过将逻辑拆分为可复用的函数单元，开发者可以构建出高内聚、低耦合的前端应用。Vue 3的这次进化，让我们在复杂应用开发中拥有了更优雅的武器。