计算属性本身不直接翻译，但通过封装语言包和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，且更新后计算属性能重新求值
