组合式函数参数本身不具响应式，需用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 封装或转换：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 接收 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 () }，方便调用方直接绑定模板
