vue多语言时遇到的坑,语言变化了，变量里面的label值却没有变化

const navTabList = [
  {
    label: "VIP",
    name: "VIP",
    id: 2,
  },
  {
    label: i18n.global.t("Header.downLoad"),
    name: "DownLoad",
    id: 1,
  },
];  // 语言变化了 这里面的label值却没有变化

原因：

问题出在 label 属性上。vue3的响应式只会追踪对象的属性访问和修改，而不会追踪属性值的变化。因此，当 i18n.global.t("Header.gameLibrary") 返回不同的翻译结果时，navTabList 中的 label 值不会自动更新。 解决办法：

const navTabList = [

  {
    label: "VIP",
    name: "VIP",
    id: 2,
  },
  {
    get label() {
      return i18n.global.t("Header.downLoad");
    },
    name: "DownLoad",
    id: 1,
  }]

我们将 label 定义为一个 getter 函数，该函数通过 i18n.global.t 动态获取翻译结果。由于使用了 computed 属性，每当 i18n.global.t 的结果发生变化时，label 的值也会自动更新。