Vue全局属性挂载含vue-query的组合式函数报错问题咨询

为什么全局挂载会报错？ #

你的问题出在两个核心点上：

1. 组合式函数的调用上下文错误
   useQuery（包括你的useComposable）属于Vue组合式API，必须在激活的Effect Scope中调用——也就是组件的setup函数、其他组合式函数，或者组件生命周期钩子（在setup内执行的）。而你在Vue插件的install函数中直接调用useComposable()，此时没有任何组件的Effect Scope激活，useQuery内部用到的onScopeDispose API找不到关联的作用域，直接抛出错误。

2. 无限递归更新循环
   你把$t定义为每次调用都执行useComposable().t(key)，意味着每次调用$t都会新建一个useQuery实例。当组件模板中使用$t时，访问响应式的data[key]会触发组件重新渲染；重新渲染时又会再次调用$t，再次创建新的useQuery，再次触发响应式更新，最终导致无限循环，触发“Maximum recursive updates exceeded”错误。

可行的解决方案 #

方案1：全局作用域初始化共享实例 #

如果你的翻译数据是全局共享的（比如单语言场景），可以创建一个全局Effect Scope来运行组合式函数，把生成的t挂载为全局属性：

import { createApp, effectScope } from 'vue';
import { useComposable } from './path-to-your-composable';

const app = createApp(App);

// 创建全局作用域执行组合式函数
const globalScope = effectScope();
const { t } = globalScope.run(() => useComposable());

// 挂载全局属性
app.config.globalProperties.$t = t;

app.mount('#app');

// 可选：应用卸载时清理全局作用域
const originalUnmount = app.unmount;
app.unmount = () => {
  globalScope.stop();
  originalUnmount();
};

方案2：用Provide/Inject传递（推荐） #

这是更符合Vue组合式API最佳实践的方式，确保组合式函数在组件作用域内执行：

1. 在根组件或app启动时提供t：

// App.vue
import { useComposable, provide } from 'vue';

export default {
  setup() {
    const { t } = useComposable();
    // 提供全局可注入的翻译函数
    provide('$t', t);
    return { t };
  }
};

2. 在任意组件中注入使用：

import { inject } from 'vue';

export default {
  setup() {
    const $t = inject('$t');
    return { $t };
  }
};

方案3：组件级缓存的全局属性 #

如果一定要用$t全局属性，可以在组件第一次调用时初始化组合式函数并缓存，确保在组件作用域内执行：

app.use({
  install(app) {
    app.config.globalProperties.$t = function(key) {
      // 缓存当前组件的t函数，避免重复创建useQuery
      if (!this._cachedTranslateT) {
        // 此时this指向组件实例，处于激活的Effect Scope中
        const { t } = useComposable();
        this._cachedTranslateT = t;
      }
      return this._cachedTranslateT(key);
    };
  }
});

注意：这种方式下$t只能在组件实例上下文中调用（比如模板、组件方法/setup中），不能在非组件环境使用。

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