Vue单文件组件中data内使用vue-i18n的$t函数失效问题

这问题我之前做多语言项目时也踩过坑，核心原因和Vue的响应式机制、vue-i18n的工作逻辑直接相关，咱们一步步理清楚：

1. 为什么data里的this.$t()会“失效”？ #

组件的data函数是在实例创建的早期阶段（created钩子执行前）运行的，此时this.$t()确实能拿到当前语言的翻译结果，但这个值是一次性固定死的——一旦赋值给links里的label，就变成了一个静态字符串，没有任何机制会在语言切换时重新执行this.$t()来更新它。

哪怕你换成this.$i18n.t()也没用，本质还是在初始化时取了一次值，后续locale变化时，data里的变量不会主动触发重新计算，所以看起来翻译没更新。

2. 模板里用{{ $t(键) }}为啥正常？ #

模板里的表达式是每次组件渲染都会重新执行的。当你通过beforeEnter切换语言时，vue-i18n的locale发生变化，这会触发组件的重新渲染，此时$t(键)就会用新的语言包重新计算，自然能拿到最新的翻译。

3. 计算属性为什么能解决问题？ #

计算属性是Vue响应式系统的核心特性之一，它会自动追踪内部依赖的变化。$t()方法内部其实依赖了this.$i18n.locale这个响应式变量，所以当语言切换导致locale变化时，计算属性会被自动触发重新计算，返回新的翻译结果，links数组也就跟着更新了。

给你两个常用的解决方案示例： #

方案一：用计算属性生成links

<template>
  <nav>
    <a v-for="link in links" :key="link.path" :to="link.path">{{ link.label }}</a>
  </nav>
</template>

<script>
export default {
  computed: {
    links() {
      return [
        { path: '/home', label: this.$t('nav.home') },
        { path: '/about', label: this.$t('nav.about') }
      ]
    }
  }
}
</script>

方案二：data存翻译键，模板里动态翻译

<template>
  <nav>
    <a v-for="link in links" :key="link.path" :to="link.path">{{ $t(link.key) }}</a>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      links: [
        { path: '/home', key: 'nav.home' },
        { path: '/about', key: 'nav.about' }
      ]
    }
  }
}
</script>

简单总结下：如果需要翻译内容随语言切换实时更新，要么用计算属性动态生成，要么在模板里直接调用$t()；data里直接存翻译结果只适合语言不会变化的静态场景。

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