用 reactive 实现多语言热更新的关键是将语言包与 locale 统一封装为响应式对象，切换 locale 时自动触发依赖更新；提供带校验、持久化和依赖收集的 setLocale 方法；模板中通过计算函数 t() 响应式读取翻译，支持运行时动态合并新语言包。
用 reactive 实现多语言词典的动态热更新，关键在于把语言包本身做成响应式对象，并让切换动作只改状态不重载实例——这样所有依赖它的组件会自动重新求值，无需刷新页面或手动触发更新。
语言状态用 reactive 封装
把当前语言标识和全部语言包统一放进一个 reactive 对象里：
locale: 'zh-CN',
messages: {
'zh-CN': { login: '登录', logout: '退出' },
'en-US': { login: 'Login', logout: 'Logout' }
}
})
注意：不要用 ref 包整个对象，因为 ref 对复杂对象内部属性变化的追踪不如 reactive 直接高效；也不要把 messages 单独 reactive，否则切换 locale 时无法触发视图响应。
提供安全的语言切换方法
切换语言不能直接赋值 i18nState.locale = 'en-US' 就完事，要加校验和持久化：
立即学习“前端免费学习笔记（深入）”；
- 检查新 locale 是否在
messages中存在，避免取不到 key 导致空字符串 - 同步写入 localStorage，保证刷新后仍保持上次选择
- 触发一次读取（比如访问
i18nState.messages[i18nState.locale]），确保依赖被正确收集
示例函数：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
if (!i18nState.messages[newLocale]) return;
i18nState.locale = newLocale;
localStorage.setItem('lang', newLocale);
}
模板中直接响应式使用
在组件中定义一个计算型翻译函数，它会随 i18nState.locale 自动重执行：
const msgs = i18nState.messages[i18nState.locale];
return key.split('.').reduce((o, k) => o?.[k], msgs) ?? key;
};
然后在模板里直接用：
<button>{{ t('login') }}</button>只要 i18nState.locale 变，t() 就重算，绑定的插值自然更新——这就是 reactive 驱动的热更新核心。
支持运行时加载新语言包
如果需要后期动态拉取语言文件（比如用户选了小众语种才加载），可以扩展 messages：
- 用
Object.assign(i18nState.messages, { 'ja-JP': loadedMsgs })合并新包 - 注意：直接
i18nState.messages['ja-JP'] = ...是响应式的，Proxy 能捕获新增属性 - 后续调用
setLocale('ja-JP')就能立即生效，无需重启或重挂载组件
这种机制天然适配字典类数据的渐进式加载，也便于做按需加载或灰度发布。
