用 computed 实现多语言切换，核心是将语言数据与当前语言状态联动：通过扁平化语言包结构和响应式 locale 依赖，使 lang.xxx 自动更新；支持函数式文案和页面状态保持，无需刷新或重建组件。

用 computed 实现多语言切换，核心是把语言数据和当前语言状态“联动”起来——语言变了，文本自动更新，无需手动刷新或重复取值。

语言包结构要扁平可读

避免深层嵌套，用一级键名直接对应业务模块，方便 computed 快速定位：

const locales = {
  zh: {
    home: '首页',
    login: '登录',
    welcome: '欢迎回来'
  },
  en: {
    home: 'Home',
    login: 'Login',
    welcome: 'Welcome back'
  }
}

这样在组件里就能直接写 lang.home，语义清晰、维护成本低。

用 computed 包一层实时语言对象

把当前语言标识（比如 locale）作为响应式依赖，让 computed 自动返回对应语言包：

观猹

一款AI工具，主要用于观猹（Watcha.cn）丨AI 产品的大众点评，适合需要提升相关任务效率的用户。

下载

export default {
  data() {
    return {
      locale: 'zh' // 可由用户选择或浏览器自动识别
    }
  },
  computed: {
    lang() {
      return locales[this.locale] || locales.zh
    }
  }
}

模板中直接使用：{{ lang.home }}、{{ lang.welcome }}。语言切换只需改 this.locale，所有 lang.xxx 立刻响应更新。

支持带参数的动态文案（如用户名、数量）

纯静态 key 不够用？可以在语言包里放函数：

const locales = {
  zh: {
    welcomeUser: name => `你好，${name}！`,
    itemCount: count => `共 ${count} 条记录`
  },
  en: {
    welcomeUser: name => `Hello, ${name}!`,
    itemCount: count => `${count} items total`
  }
}

模板中调用：{{ lang.welcomeUser('张三') }} 或 {{ lang.itemCount(5) }}。函数本身不破坏响应性，computed 仍能追踪 this.locale 的变化。

切换语言时保持页面状态不重置

• 不要用 location.reload() 或整个组件 v-if 销毁重建
• 把 locale 存在 data 或 pinia/vuex 中，确保跨组件一致
• 首次加载时建议根据 navigator.language 自动设默认值，再交由用户覆盖
• 可配合 watch 在语言变更后做副作用，比如更新 属性