Vue 3组合式API是重构响应式逻辑的思维方式，核心要点包括：ref用于基础类型，reactive用于对象数组；computed用于派生值，watch用于副作用；生命周期函数需负责资源清理；自定义Hook以use开头封装可复用逻辑。
Vue 3 组合式 API 不是“换种写法”，而是重构响应式逻辑的思维方式。 它把数据、逻辑、副作用按功能拆开，再用函数组织起来——不是堆代码，是搭积木。下面这条路线图，专为刚写完第一个 setup() 的人设计，不讲原理推导，只给能立刻抄、改、跑通的要点。
ref 和 reactive：选对容器，少踩 80% 的响应式坑
ref 用于基础类型（string/number/boolean）和需要被解构、传递的响应式变量；reactive 用于对象和数组。 常见错误是给对象用 ref、给原始值用 reactive——结果就是模板里不更新、.value 写到手酸、或解构后失去响应性。
- 字符串、计数器、开关状态 → 用
ref('hello')或ref(0)，模板中直接写{{ count }}，JS 中读写都带.value - 表单对象、列表、嵌套结构 → 用
reactive({ name: '', items: [] })，模板中直接{{ form.name }}，JS 中直接form.name = 'Alice'，不用 .value - 要解构 reactive 对象又想保留响应性？用
toRefs()：const { name, age } = toRefs(user)
computed 和 watch：计算不重复，监听不漏掉
computed 是声明式“自动算”，watch 是命令式“你动我动”。别用 watch 去替代 computed，也别在 computed 里写副作用（比如发请求）。
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 需要派生新值（如搜索过滤、总价计算）→ 用
computed(() => list.filter(...))，返回只读 ref，高效且可缓存 - 需要响应变化做事情（如输入防抖、路由跳转、发请求）→ 用
watch：watch(searchKey, (newVal) => { api.search(newVal) }, { debounce: 300 }) - 监听多个源？传数组：
watch([a, b], ([newA, newB]) => {...})；监听深层对象？加deep: true，但慎用——性能代价高
onMounted 到 onUnmounted：生命周期不是“钩子”，是资源管理契约
组合式 API 把生命周期变成函数调用，意味着你可以把它封装进任意逻辑函数里。重点不是“什么时候执行”，而是“谁负责清理”。
立即学习“前端免费学习笔记（深入）”；
- 发起请求？
onMounted(() => { loading.value = true; fetch().then(...).finally(() => loading.value = false) }) - 绑定全局事件（如键盘监听）？必须在
onBeforeUnmount或onUnmounted里removeEventListener，否则内存泄漏 - 定时器、WebSocket、第三方库实例（如 Map 实例）？一律在
onUnmounted清理，哪怕只是timer && clearInterval(timer)
自定义 Hook：把重复逻辑抽成函数，不是为了炫技，是为了不写错
一个自定义 Hook 就是一个接受参数、返回响应式变量和方法的函数。它天然隔离作用域，不污染组件内部，还能复用测试。
- 例子：封装防抖搜索
useDebouncedSearch(apiFn, delay = 300)，返回{ result, loading, search }，组件里直接解构使用 - 规则：函数名以
use开头；内部可调用所有组合式 API（ref、watch、onMounted 等）；不直接操作 DOM，不依赖 this - 文件位置：建议放在
composables/目录下，如useScrollPosition.js、useFormValidator.js
