计算属性本身不直接翻译，但通过封装语言包和locale实现响应式多语言切换：将locale存为响应式数据，用计算属性返回对应语言对象，支持插值函数、localStorage持久化及缺失键fallback。

计算属性本身不翻译，但它能让你的多语言切换真正“动起来”——只要语言标识一变，所有绑定的文本自动更新，不用刷新页面，也不用手动调用方法。

用计算属性封装语言对象

把当前语言码（如 zh 或 en）存在响应式数据里，再让计算属性返回对应语言包：

• 在 data 中定义 locale: 'zh'
• 写一个 lang 计算属性：lang() { return messages[this.locale] || messages.en }
• 模板中直接写 {{ lang.login }}、{{ lang.welcome }}，切换 this.locale = 'en'，全文本立刻响应

支持带参数的动态文案

静态 key 不够用？语言包里可以直接存函数，计算属性照常响应：

• 语言包示例：zh: { welcome: name => `你好，${name}！`, items: n => `${n} 条记录` }
• 模板调用：{{ lang.welcome('李四') }} 或 {{ lang.items(3) }}
• 函数体内部不破坏响应性，只要 this.locale 变，lang 就重算，新函数被自动使用

语言切换要持久化 + 首次加载不闪屏

用户选了中文，关掉页面再打开还是中文——这靠两步落地：

• 切换时同步写入 localStorage.setItem('locale', newLang)
• 组件初始化（created 或 setup）时读取 localStorage.getItem('locale') 赋值给 locale，避免默认值先渲染再跳变
• 如果项目用了 Pinia，建议把 locale 提到 store 管理，全站自动同步

避开几个典型坑

看似简单，但容易卡住的地方很集中：

• 语言包对象必须是响应式的（比如用 ref 或挂在 data 里），硬编码 { zh: {...} }[this.locale] 不会更新
• 计算属性不能接收参数（Options API 中 computed: { t(key) { ... } } 是无效写法）
• 键缺失时要有 fallback，比如 messages[this.locale]?.[key] || key，防止页面留空
• 异步加载语言包时，确保 messages 是 ref，且更新后计算属性能重新求值