Vue3 Composition API中从reactive对象注入内部ref时丢失响应性的问题咨询

这个问题我之前也碰到过，其实核心原因是Vue 3的reactive对象会自动解包内部的ref——当你访问imageSetup.position的时候，拿到的已经是position这个ref的原始值（也就是字符串"right"），而不是ref本身，所以你provide出去的自然就是个普通字符串，响应性当然就丢了。

接下来给你几个能满足需求的解决方案，你可以根据自己的场景选：

方案一：直接provide整个reactive对象（最省心） #

如果你的子组件可以接受整个状态对象，那直接把整个imageSetup provide出去就行，这样子组件里访问它的属性时，响应性是完全保留的：

<!-- 父组件 -->
import { ref, reactive, provide } from 'vue';
const position = ref("right");
const imageSetup = reactive({ position });
provide('imageSetup', imageSetup);

<!-- 子组件 -->
import { inject } from 'vue';
const imageSetup = inject('imageSetup');
// 这里使用 imageSetup.position 就是响应式的

方案二：用toRef单独创建响应式引用（按需注入单个属性） #

如果你确实只需要单独注入某个属性，那可以用toRef方法，它会创建一个和原reactive对象属性绑定的ref，保持响应性关联：

<!-- 父组件 -->
import { ref, reactive, provide, toRef } from 'vue';
const position = ref("right");
const imageSetup = reactive({ position });
// 用toRef创建指向imageSetup.position的响应式引用
provide('position', toRef(imageSetup, 'position'));

<!-- 子组件 -->
import { inject } from 'vue';
const position = inject('position');
// 现在position是一个响应式ref，修改position.value会同步到原imageSetup

方案三：用toRefs批量转换后按需provide（多属性场景） #

如果你有多个属性需要单独provide，用toRefs把整个reactive对象转换成包含所有ref的对象，再按需提供：

<!-- 父组件 -->
import { ref, reactive, provide, toRefs } from 'vue';
const position = ref("right");
const size = ref("medium");
const imageSetup = reactive({ position, size });
// 把reactive对象转成ref集合
const imageSetupRefs = toRefs(imageSetup);
// 按需提供单个ref
provide('position', imageSetupRefs.position);
provide('size', imageSetupRefs.size);

<!-- 子组件 -->
import { inject } from 'vue';
const position = inject('position');
const size = inject('size');
// 这两个都是响应式的ref

需要注意的是，toRef和toRefs创建的ref都是和原reactive对象联动的，修改它们的value会同步更新原对象，反之亦然，完全能满足你用单个reactive对象管理状态，同时单独注入属性还保持响应性的需求。

内容来源于stack exchange