VueJS中vue-i18n在计算属性与数据属性中切换语言不更新问题

我来帮你捋清楚这个本地化更新的问题，其实核心是响应式依赖追踪的事儿，咱们一步步说：

为什么直接用{{ $t('message.hello') }}能正常更新？ #

vue-i18n的$t方法内部会自动监听$i18n.locale的变化，模板里的插值会随着locale改变重新渲染，这个是框架帮咱们做好的，所以能实时更新。

为什么data里赋值不行？ #

当你在data里写msg: this.$t('message.hello')时，这行代码只在组件初始化的时候执行一次，把当时的翻译结果存在msg里，之后locale变化时，data不会自动重新计算，所以msg的值就停留在初始状态了。

至于你说的this.localeTest显示undefined，大概率是你没在i18n的消息配置里定义message.localeTest这个键，或者你直接访问this.localeTest而不是this.$t('message.localeTest')——毕竟localeTest不是组件的data/props属性，自然会是undefined。

重点：让computed属性生效的正确姿势 #

computed的核心就是依赖追踪，只要你的computed属性里用到了响应式的依赖，当依赖变化时它就会自动重新计算。vue-i18n的$t方法内部已经和$i18n.locale建立了响应式关联，所以只要在computed里直接返回$t的调用就行，不用额外做监听。

正确示例代码 #

<template>
  <div>
    <p>直接模板插值：{{ $t('message.hello') }}</p>
    <p>computed属性绑定：{{ helloMsg }}</p>
    <button @click="switchLang('en')">切换英文</button>
    <button @click="switchLang('zh')">切换中文</button>
  </div>
</template>

<script>
export default {
  computed: {
    helloMsg() {
      // 这里直接返回$t的调用，会自动响应locale变化
      return this.$t('message.hello')
    }
  },
  methods: {
    switchLang(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

这样切换语言时，helloMsg会自动更新，因为computed感知到了$t内部的locale依赖变化。

如果一定要用data怎么办？ #

要是你有特殊场景必须存在data里，那得手动监听$i18n.locale的变化，然后更新data的值：

<script>
export default {
  data() {
    return {
      msg: ''
    }
  },
  created() {
    // 初始化时先赋值一次
    this.updateMsg()
  },
  watch: {
    // 监听locale变化，即时更新
    '$i18n.locale': {
      immediate: true, // 初始化时就执行一次handler
      handler() {
        this.updateMsg()
      }
    }
  },
  methods: {
    updateMsg() {
      this.msg = this.$t('message.hello')
    },
    switchLang(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

总结 #

• 优先用computed属性绑定翻译内容，写法最简洁，自动响应locale变化；
• data里直接赋值翻译结果只会保留初始值，需要手动监听locale来更新；
• 遇到undefined的情况，先检查i18n消息配置的键名是否正确，是否用$t方法访问。

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