组合式函数参数本身不具响应式，需用ref、reactive等api显式封装才能被vue追踪；普通变量或解构赋值会丢失响应性，watch仅监听响应式源。

组合式函数（Composables）本身不自动赋予参数响应式，它的响应式行为完全取决于你如何处理传入的参数——Vue 不会对普通参数做任何响应式转换，只有明确用 ref、reactive 或其衍生 API 包装的数据，才会进入响应式系统。

参数本身不是响应式的

如果你把一个普通变量（比如字符串、数字、对象字面量）直接作为参数传入组合式函数，它只是被复制或引用，不会自动变成响应式：

• 普通对象参数：{ count: 0 } → 在函数内部修改 count 不会触发更新，也不会被 Vue 追踪
• 基础类型参数：'hello' 或 42 → 函数内无法通过赋值改变外部原始值，更无响应性可言
• 解构后的属性：useMyLogic({ name: ref('Alice') })，若在函数里解构为 const { name } = props，name 仍是 ref，但若写成 const { name: n } = props，则 n 是普通字符串，失去响应性

让参数具备响应式的关键方式

要使参数在组合式函数中可响应、可追踪、可更新，必须主动使用响应式 API 封装或转换：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 接收 ref 参数并直接使用：function useCounter(countRef) { return { doubled: computed(() => countRef.value * 2) } }
• 接收 reactive 对象并保持原引用：function useUser(userObj) { return { fullName: computed(() => userObj.firstName + ' ' + userObj.lastName) } }
• 对非响应式参数做显式包装：function useConfig(config) { const reactiveConfig = reactive({ ...config }); return { config: reactiveConfig }; }
• 配合 toRef / toRefs 提取响应式引用：如果传入的是 reactive 对象，用 toRefs 可安全解构而不丢失响应性

常见误用与注意事项

容易忽略的细节往往导致逻辑失效：

• 不要在组合式函数内直接修改传入的基础类型参数 —— 它们是只读副本，改了也影响不到外部，更不会触发视图更新
• 避免对普通对象参数调用 unref() 或 toRaw()，除非你明确知道它可能是 ref 或 reactive 的混合体
• props 默认是非响应式对象（除非用 defineProps 声明），在组合式函数中使用时需先用 toRefs 或 $ref()（启用语法糖时）处理
• watch 和 watchEffect 只能有效监听 ref、reactive、computed 等响应式源 —— 普通参数不在监听范围内

推荐实践模式

提升可维护性与健壮性的常用写法：

• 约定输入优先使用 ref 或 reactive，便于统一处理和类型推导
• 函数签名清晰标注参数类型，例如 useFilter(list: Ref, filterFn: (item: T) => boolean)
• 内部做防御性判断：isRef(input) ? input : ref(input)，适配多种传参风格
• 返回值尽量保持响应式结构，如返回 { data: ref(), loading: ref() }，方便调用方直接绑定模板

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！