升级Vue项目后在computed中使用vue-i18n.t()触发警告的问题

问题原因 #

Vue 3.4.x 对组件实例的生命周期校验做了严格升级，computed getter 的执行时机并不保证存在活跃的组件实例上下文。而 VueI18n 9.9.x 的t函数内部依赖getCurrentInstance()获取组件级的i18n配置，当在computed getter里调用t时，就会触发这个合规性警告。虽然官方文档说明允许在computed中使用t，但这是基于旧版本Vue的实例检查逻辑，新版本的严格校验导致了冲突。

低成本解决方案 #

1. 切换全局作用域的I18n实例 #

调用useI18n时指定useScope: 'global'，让t函数直接使用全局I18n实例，不再依赖当前组件实例，彻底避免getCurrentInstance的调用：

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'

// 指定全局作用域
const { t } = useI18n({ useScope: 'global' })
const props = defineProps<{
  infot: string
}>()

const label = computed(() => t(props.infot))
</script>

2. 修复全局$t的使用问题 #

之前用全局$t无效，是因为缺少类型声明或全局实例未正确挂载。先确保main.ts中I18n实例正常挂载：

// main.ts
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'

const i18n = createI18n({
  // 你的I18n配置（比如locale、messages等）
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')

然后在项目的env.d.ts中添加全局类型声明：

// env.d.ts
import { Composer } from 'vue-i18n'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $t: Composer['t']
  }
}

之后就能在computed中正常使用$t了：

const label = computed(() => $t(props.infot))

3. 临时禁用警告（紧急场景用） #

如果以上方案无法快速落地，可以临时在Vite配置中屏蔽该警告，后续再逐步优化代码：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        warnHandler: (msg, vm, trace) => {
          // 过滤特定警告
          if (msg.includes('getCurrentInstance() called inside a computed getter')) return
          console.warn(msg, trace)
        }
      }
    }
  })]
})

4. 预绑定响应式props引用 #

用toRef把props转为响应式引用，确保computed的依赖追踪正确，同时减少t函数在getter内的实例检查触发概率：

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { computed, toRef } from 'vue'

const { t } = useI18n()
const props = defineProps<{
  infot: string
}>()
const infotRef = toRef(props, 'infot')

const label = computed(() => t(infotRef.value))
</script>

内容的提问来源于stack exchange，提问作者Andrian Menion Leah