Vue多语言核心是将locale设为响应式数据，通过computed动态返回对应语言对象或翻译函数，配合ref/reactive确保语言包响应式，支持异步加载、兜底处理与localStorage持久化。
Vue 数据监听本身不直接做翻译，但它是实现多语言动态渲染的核心机制——关键在于把语言标识（如 locale）设为响应式数据，再通过计算属性或组合式 API 的 reactive/ref + computed，让文本随 locale 变化自动重算并更新视图。
用 ref + computed 返回当前语言对象
这是最轻量、无需插件的实现方式：
- 定义扁平化语言包（推荐一级键名，易维护）：const locales = { zh: { login: '登录', welcome: '欢迎回来' }, en: { login: 'Login', welcome: 'Welcome back' } };
- 在 setup 中声明响应式 locale：const locale = ref('zh');
- 用 computed 封装当前语言对象：const lang = computed(() => locales[locale.value] || locales.en);
- 模板中直接使用：{{ lang.login }}；改 locale.value = 'en'，所有绑定文案立刻刷新
用 computed 返回翻译函数支持动态键和参数
避免为每个文案写单独计算属性，更适合中大型项目：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 语言包可含函数：zh: { welcome: name => `你好，${name}！`, items: n => `${n} 条记录` }
- 返回可调用函数：const t = computed(() => (key, ...args) => { const msg = messages.value?.[locale.value]?.[key]; return typeof msg === 'function' ? msg(...args) : msg || key; });
- 模板调用：{{ t.value('welcome', '张三') }} 或 {{ t.value('items', 5) }}
确保语言包响应式，否则切换无效
常见错误是把语言包写成普通对象，Vue 无法追踪其内部变化：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：硬编码对象，非响应式：computed: { greeting() { return { zh: { greeting: '你好' } }[this.locale].greeting; } }
- ✅ 正确：语言包必须是 ref 或 reactive：const messages = ref({ zh: { greeting: '你好' }, en: { greeting: 'Hello' } });
- 异步加载时，用 await import('./locales/en.json') 后赋值给 messages.value，computed 会自动重求值
兜底处理与持久化落地
提升健壮性和用户体验：
- 缺失键时返回 key 本身：messages.value?.[locale.value]?.[key] || key
- 或 fallback 到默认语言：messages.value?.[locale.value]?.[key] || messages.value?.zh?.[key] || key
- 切换时存 localStorage：localStorage.setItem('locale', newLang)
- 初始化时读取：const saved = localStorage.getItem('locale'); locale.value = saved || 'zh';
