Vue 3 的 computed 是处理多语言文本动态匹配最轻量高效的方式，通过响应式依赖自动更新并缓存结果；语言包应扁平设计，用 zh/en 等简短 locale 为顶层 key；通过 computed 封装当前语言对象并支持带参数插值，天然适配响应式系统与状态管理。

Vue 3 的 computed 是处理多语言文本动态匹配最轻量、高效的方式——它不依赖额外插件，靠响应式依赖自动更新文案，且天然缓存结果，避免重复查找或渲染开销。

语言包结构要扁平可读

多语言对象应设计为一级键名直映射业务字段，避免嵌套层级过深。这样 computed 可以快速定位，也便于模板中书写和团队协作：

• 推荐写法：用 zh、en 等简短 locale 标识作为顶层 key，内部直接是文案键值对
• 示例：

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

• 不建议嵌套如 zh.nav.home 或 messages.zh.home，会增加 computed 计算路径和模板调用复杂度

用 computed 封装当前语言对象

把 locale 设为响应式数据（如 ref），在 computed 中返回对应语言包，模板即可用 lang.xxx 直接取值：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• setup 写法（Vue 3 Composition API）：

  import { ref, computed } from 'vue'
  const locale = ref('zh')
  const lang = computed(() => locales[locale.value] || locales.zh)

• 切换语言只需修改 locale.value = 'en'，所有 lang.xxx 立即响应更新，无需刷新页面或重建组件
• 模板中直接使用：{{ lang.home }}、{{ lang.welcome }}

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

纯静态 key 不足以覆盖真实场景。可在 computed 中返回一个函数，实现安全、可复用的插值逻辑：

立即学习“前端免费学习笔记（深入）”；

• 写法示例：

  const t = computed(() => {
    const base = locales[locale.value] || locales.zh
    return (key, options = {}) => {
      let text = base[key] || key
      Object.keys(options).forEach(k => {
        text = text.replace(`{${k}}`, options[k])
      })
      return text
    }
  })

• 模板中调用：{{ t('welcome', { name: userInfo.name }) }}
• 优势：插值逻辑集中管理，避免每个文案都手写 replace；支持 fallback 到 key 自身，便于开发期占位

配合状态保持与组件复用

computed 返回的语言对象是响应式的，天然适配 Vue 的响应式系统，能无缝融入各种上下文：

• 子组件接收 locale props 后，可独立定义自己的 lang computed，不污染父级状态
• 与 Pinia/Vuex 集成时，可将 locale 存于 store，组件内通过 computed(() => store.locale) 派生，保持全局一致
• 若需格式化日期、数字等本地化内容，可结合 Intl API 在同一 computed 中封装，例如：lang.date(new Date())