第三章：Vue3 组合式API（逻辑复用的核心武器）

一、入门：组合式API vs Options API，为什么选前者？

1. Options API的痛点：在大型组件中，data、methods、computed等选项分散，逻辑相关的代码被拆分到不同地方（如“用户信息获取”的请求、数据、方法分别在data、methods中），维护时需上下翻找代码。
2. 组合式API的优势：用<script setup>语法糖，可将“同一逻辑”的代码聚合在一起（如“用户信息逻辑”的请求函数、用户数据、加载状态放在一块），代码可读性和复用性大幅提升，且支持TypeScript类型推导。
3. 基础语法：<script setup>无需写export default，直接定义变量和函数即可在模板中使用，例：

<script setup>
import { ref } from 'vue'
// 同一逻辑的代码聚合
const count = ref(0)
const increment = () => {
  count.value++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="increment">加1</button>
</template>

二、精通：组合式API核心函数与逻辑复用

1. 核心函数深度使用：
   • computed：创建计算属性，依赖其他响应式数据，自动缓存结果（依赖不变时不会重新计算），例：const doubleCount = computed(() => count.value * 2)，页面使用doubleCount，当count变化时自动更新。
   • watch：监听响应式数据变化，执行自定义逻辑，支持监听单个数据、多个数据、对象属性，例：
     • 监听单个数据：watch(count, (newVal, oldVal) => { console.log('count从', oldVal, '变到', newVal) })
     • 监听对象属性：watch(() => user.name, (newName) => { console.log('用户名变了：', newName) })
   • watchEffect：自动收集依赖，依赖变化时重新执行，无需手动指定监听对象，适合“副作用逻辑”（如请求数据、操作DOM），例：watchEffect(() => { console.log('count变了：', count.value) })，会自动监听count。
2. 逻辑复用：用“组合式函数”抽离通用逻辑，函数名以use开头（规范），例：抽离“计数器逻辑”为useCounter()，在多个组件中引入使用，实现逻辑复用：

// hooks/useCounter.js
import { ref } from 'vue'
export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const increment = () => count.value++
  const decrement = () => count.value--
  return { count, increment, decrement }
}
// 在组件中使用
<script setup>
import { useCounter } from './hooks/useCounter'
const { count, increment } = useCounter(10) // 初始值10
</script>

三、实战：用组合式API开发“待办清单（TodoList）”

1. 需求拆解：实现“添加待办”“删除待办”“切换待办状态”“统计已完成数量”“清空所有待办”功能。
2. 逻辑实现（按功能聚合代码）：
   • 待办数据管理：用reactive定义todos数组，存储待办项（id、text、done）；用ref定义inputText，绑定输入框v-model。
   • 添加待办：定义addTodo函数，判断输入不为空后，push新待办项到todos，清空输入框。
   • 切换与删除：定义toggleTodo（修改item.done）和deleteTodo（splice删除项）函数，绑定到列表的“切换按钮”和“删除按钮”。
   • 统计与清空：用computed计算completedCount（已完成数量），定义clearAll函数（todos.length = 0）。
3. 组件拆分：将“待办输入框”“待办列表项”拆分为独立组件（TodoInput.vue、TodoItem.vue），通过props传递数据，emit触发事件（如TodoItem点击删除时emit('delete', id)，父组件监听并执行删除逻辑），实现组件化开发。