计算属性本身不翻译，但通过将locale设为响应式数据并封装语言包映射逻辑，可实现响应式多语言切换：支持点语法访问（如lang.login）、函数式动态插值（如$t('welcome')('李四')）、localStorage持久化及缺失键fallback。
计算属性本身不翻译，但能让你的多语言文本真正“按需响应”——只要把语言标识（如 locale）设为响应式数据，再让计算属性返回对应语言对象或翻译函数，模板中就能用动态键名直接取值，无需插件也能实现干净、可维护的多语言切换。
用计算属性返回语言对象，支持点语法访问
把语言包和当前 locale 封装进一个计算属性，让它返回整个语言对象，模板中即可用 {{ lang.login }}、{{ lang.home.title }} 这类点语法访问嵌套字段：
- 在 data 中声明 locale: 'zh-CN'
- 定义计算属性 lang：lang() { return messages[this.locale] || messages['zh-CN'] }
- 语言包结构保持扁平或合理嵌套，例如：messages['zh-CN'] = { login: '登录', home: { title: '首页' } }
用计算属性返回翻译函数，支持动态键名+参数
当需要传参（如用户名、数量）或运行时拼接 key 时，让计算属性返回一个函数，模板调用更灵活：
- 计算属性写法：$t() { const lang = this.locale; return (key, args) => { const text = messages[lang]?.[key] || key; return typeof text === 'function' ? text(args) : text; } }
- 语言包中可存函数：zh-CN: { welcome: name => `你好，${name}！`, items: n => `${n} 条记录` }
- 模板中使用：{{ $t('welcome')('李四') }} 或 {{ $t('items')(5) }}
确保语言包响应式，避免静态访问失效
硬编码 { zh: {} }[this.locale] 不会响应更新。必须让语言包本身可被 Vue 追踪：
- 推荐将 messages 放入 data 或用 ref() 声明（Composition API）
- 若语言包异步加载（如按需 import），更新 messages 后需保证计算属性能重新求值
- 键缺失时加 fallback：messages[lang]?.[key] || key，防止页面空白
配合 localStorage 持久化，消除首次闪屏
用户选了语言，刷新后不该回到默认值。初始化和切换都要同步存储与读取：
- 组件创建时（created 或 onMounted）：从 localStorage 读取并赋值给 this.locale
- 提供切换方法：changeLocale(newLang) { this.locale = newLang; localStorage.setItem('locale', newLang); }
- 全局状态管理（如 Pinia）更优：把 locale 提到 store，所有组件自动响应，无需重复逻辑
