Vue3 Props 在 Hooks 中的响应性处理

1. 问题背景

在 Vue3 的组合式 API 开发中，经常需要将父组件的 props 传递给自定义 hooks 进行处理。这个过程中很容易遇到响应性丢失的问题。

2. 问题场景

2.1 业务需求

父组件需要动态切换 API 函数
子组件需要使用这个 API 函数获取数据
API 函数的变化需要能够被子组件感知到

2.2 初始代码

父组件 (Parent.vue):

<template>
  <div>
    <button @click="changeApi">Change API</button>
    <child-component :api="getDataApi" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const getDataApi = ref();
// 模拟两个不同的 API 函数
const api1 = (params: any) => console.log("API 1 called", params);
const api2 = (params: any) => console.log("API 2 called", params);
const changeApi = () => {
  getDataApi.value = api1; // 或 api2
};
</script>

子组件 (Child.vue):

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script setup lang="ts">
import { toRef } from "vue";
import { useDataFetch } from "./useDataFetch";

const props = defineProps<{ api: any }>();

// ❌ 问题版本 1：直接传递 props.api （在 hooks 中使用时已经失去响应性）
const { fetchData } = useDataFetch({
  api: props.api,
});
</script>

Hook (useDataFetch.ts):

export function useDataFetch(reception: { api: any }) {
  const fetchData = async () => {
    const res = await reception.api({ id: 1 });
    console.log(res);
  };
  return {
    fetchData,
  };
}

3. 问题分析

3.1 响应性丢失的原因

Props 虽然本身是响应式的，但在传递给 hooks 时可能会失去响应性
直接使用 props.api 会创建一个值的副本，失去响应式连接
错误的 toRef 使用方式会创建新的响应式引用，但与原始 props 断开连接

3.2 代码中的具体表现

当父组件中的 getDataApi 改变时，子组件中的 fetchData 方法仍然使用旧的 API
没有正确建立响应式连接
控制台输出始终显示第一次传入的 API 结果

4. 尝试解决

4.1 尝试方案一（失败）

// ❌ 错误尝试：使用 toRef 包装 props.api
const { fetchData } = useDataFetch({
  api: toRef(props.api),
});

问题：创建了新的 ref，但失去了与原始 props 的响应式连接

4.2 尝试方案二（成功）

// ✅ 正确方案：使用 toRef(props, "propertyName")
const { fetchData } = useDataFetch({
  api: toRef(props, "api"),
});

5. 完整的解决方案

修改后的子组件 (Child.vue):

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script setup lang="ts">
import { toRef } from "vue";
import { useDataFetch } from "./useDataFetch";

const props = defineProps<{ api: any }>();

const { fetchData } = useDataFetch({
  api: toRef(props, "api"),
});
</script>

修改后的 Hook (useDataFetch.ts):

import { type Ref } from "vue";

export function useDataFetch(reception: { api: Ref<any> }) {
  const fetchData = async () => {
    if (!reception.api.value) return;
    const res = await reception.api.value({ id: 1 });
    console.log(res);
  };

  return {
    fetchData,
  };
}

6. 总结

6.1 三种传值方式的区别

api: toRef(props, "api")
- ✅ 正确方式
- 创建指向 props.api 的响应式引用
- 保持与原始 props 的响应式连接
api: toRef(props.api)
- ❌ 错误方式
- 创建新的响应式引用，但与原始 props 断开连接
- 父组件更新时不会触发子组件更新
api: props.api
- ❌ 错误方式
- 直接传值(在 hooks 中使用时已经失去响应性)，在复杂场景中失去响应性
- 无法感知父组件的更新

6.2 最佳实践

在传递 props 到组合式函数（hooks）时，使用 toRef(props, "propertyName")
确保正确定义类型，包括 Ref 类型的标注
在使用前检查值是否存在
使用 .value 访问 ref 的值

6.3 原因解释

Vue3 的响应式系统需要正确的引用链接才能追踪变化
toRef(props, "propertyName") 创建了正确的响应式连接
直接传值或错误使用 toRef 会破坏这个响应式连接

6.4 注意事项

Props 本身是响应式的，只有在传递给其他函数时才需要特殊处理
使用 toRef 时要注意参数的正确性
在 TypeScript 中要正确标注类型，包括 Ref 类型

这个问题的核心在于理解 Vue3 的响应式系统和正确维持响应式连接。使用正确的方式可以确保组件间的数据流动保持响应性。

这个 demo 完整展示了：

问题的起因
错误的尝试
正确的解决方案
详细的原理解释
最佳实践建议

希望这个案例能帮助更好地理解 Vue3 中 props 传值和响应性的问题。