Vue3 组合式 API 全总结：从 ref 到 hooks，初学者立即可用的进阶路线图-Vue.js-PHP中文网

vue 3组合式api是重构响应式逻辑的思维方式，核心要点包括：ref用于基础类型，reactive用于对象数组；computed用于派生值，watch用于副作用；生命周期函数需负责资源清理；自定义hook以use开头封装可复用逻辑。

vue3 组合式 api 全总结：从 ref 到 hooks，初学者立即可用的进阶路线图

Vue 3 组合式 API 不是“换种写法”，而是重构响应式逻辑的思维方式。 它把数据、逻辑、副作用按功能拆开，再用函数组织起来——不是堆代码，是搭积木。下面这条路线图，专为刚写完第一个 setup() 的人设计，不讲原理推导，只给能立刻抄、改、跑通的要点。

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 是命令式“你动我动”。别用 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，但慎用——性能代价高

组合式 API 把生命周期变成函数调用，意味着你可以把它封装进任意逻辑函数里。重点不是“什么时候执行”，而是“谁负责清理”。

发起请求？onMounted(() => { loading.value = true; fetch().then(...).finally(() => loading.value = false) })
绑定全局事件（如键盘监听）？必须在 onBeforeUnmount 或 onUnmounted 里 removeEventListener，否则内存泄漏
定时器、WebSocket、第三方库实例（如 Map 实例）？一律在 onUnmounted 清理，哪怕只是 timer && clearInterval(timer)

一个自定义 Hook 就是一个接受参数、返回响应式变量和方法的函数。它天然隔离作用域，不污染组件内部，还能复用测试。

例子：封装防抖搜索 useDebouncedSearch(apiFn, delay = 300)，返回 { result, loading, search }，组件里直接解构使用
规则：函数名以 use 开头；内部可调用所有组合式 API（ref、watch、onMounted 等）；不直接操作 DOM，不依赖 this
文件位置：建议放在 composables/ 目录下，如 useScrollPosition.js、useFormValidator.js