Vue开发者们，有没有遇到过这样的困扰？随着项目变大，data、methods、computed散落在Options API的各个角落，维护时像在玩“代码捉迷藏”？Vue 3的Composition API来了！它用函数式编程重塑逻辑组织方式，今天带你实战突破，彻底告别碎片化开发！

为什么抛弃Options API？

Options API的三大痛点：

1. 逻辑割裂：一个功能分散在data+methods+computed中，跳转阅读成本高；
2. 复用困难：mixins易引发命名冲突，逻辑纠缠难解耦；
3. 类型支持弱：TS类型推导在嵌套对象中频频失效。

Composition API核心武器库

1.setup()：逻辑聚合中心

所有响应式变量、函数、生命周期都在此集结！

<script setup> // 语法糖更简洁！  
import { ref, onMounted } from 'vue'  

const count = ref(0) // 响应式变量  

function add() {  
  count.value++ // 注意.value！  
}  

onMounted(() => {  
  console.log('组件挂载啦！')  
})  
</script>  

2.ref()vsreactive()

• ref：基本类型首选（数字、字符串），通过.value访问；
• reactive：对象类型神器，直接解构会丢失响应性！

const user = reactive({ name: '小明', age: 18 })  
const { name } = toRefs(user) // 安全解构！  

3. 逻辑复用：自定义Hook

封装一个鼠标跟踪器：

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

export default () => {  
  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 useMouseTracker from './useMouseTracker'  
const { x, y } = useMouseTracker() // 即插即用！  
</script>  

实战：组合式TodoList

步骤1：状态管理

const todos = ref([  
  { id: 1, text: '学习Composition API', done: true }  
])  
const newTodo = ref('')  

步骤2：逻辑函数化

const addTodo = () => {  
  if (!newTodo.value.trim()) return  
  todos.value.push({  
    id: Date.now(),  
    text: newTodo.value,  
    done: false  
  })  
  newTodo.value = ''  
}  

const removeTodo = id => {  
  todos.value = todos.value.filter(todo => todo.id !== id)  
}  

步骤3：计算属性独立

import { computed } from 'vue'  
const doneCount = computed(() => {  
  return todos.value.filter(t => t.done).length  
})  

总结：Composition API通过函数组合将碎片逻辑变模块化，大幅提升：

• 代码可读性（功能集中）
• 复用性（Hook自由抽取）
• TS支持（类型推导精准）
  尝试用<script setup>重构旧组件，感受“逻辑积木”的威力吧！

#vue# #前端工程# #TypeScript# #代码重构# #Composition# #程序员#