Vue中第三方库变量转reactive后用toRefs是否冗余？

我有一些来自非Vue第三方库的功能与变量，想把它们全局注册并适配Vue生态。于是我将它们转为reactive值，注册到globalProperties中。使用时，我通过$myinstance获取并再次用toRefs解构。

我的疑问是：由于一开始就转为了reactive，这里的toRefs是否必要或冗余？或是我过早使用了reactive，因为toRefs会在自定义Hook中以引用形式封装值，reactive并未提供额外作用？

我刚接触Vue，对普通变量与引用代理间的转换概念还不太熟悉，只是想借助Vue的ref来管理第三方库变量，因此有些困惑。

示例代码 #

myPlugin.ts #

import { status, feature } from "some-3rd-party-library";
import { App, reactive } from "vue";

export const myPlugin = {
  install: (app: App) => {
    const instance = reactive({
      status,
      feature,
      // 其他需要的内容...
    });
    app.config.globalProperties.$myinstance = instance;
  }
};

main.ts #

app.use(myPlugin);

useMyPlugin.ts #

import { getCurrentInstance, toRefs } from "vue";

export const useMyPlugin = () => {
  const global = getCurrentInstance();
  const myInstance = global?.appContext.config.globalProperties.$myinstance;
  
  const { status, feature } = toRefs(myInstance);
  return {
    status, 
    feature
  };
};

解答 #

1. toRefs并非冗余，是必要的
   当你直接解构reactive返回的代理对象时（比如const { status } = myInstance），得到的是该属性当前值的快照，会失去响应性——后续myInstance.status变化时，解构出来的status不会同步更新。而toRefs会把reactive对象的每个属性转换为对应的ref，解构后这些ref依然和原reactive对象保持响应式关联，视图能正确追踪变化。

2. 使用reactive是合理的，并非过早
   第三方库的变量本身不是Vue的响应式对象，Vue无法自动追踪它们的变化。用reactive把这些变量包裹成响应式代理，是让Vue能够感知到变量变化、驱动视图更新的必要步骤。如果不做这一步，即使你后续用toRefs，也无法获得响应性。

3. 额外注意事项
   如果第三方库会直接修改status或feature本身（比如它们是字符串、数字这类基本类型），reactive的响应性可能不会生效——因为reactive只能追踪对象属性的修改，无法追踪基本类型变量的重新赋值。这种情况下，建议用ref单独包装每个变量：

// 修改myPlugin.ts中的处理
const instance = {
  status: ref(status),
  feature: ref(feature)
};
// 后续如果第三方库要修改值，需要通过.value更新
// 或者确保第三方库的修改操作指向这些ref的.value

内容的提问来源于stack exchange，提问作者Tom