vue计算属性通过响应式locale驱动多语言切换：将语言包设为ref/reactive，用computed返回当前语言对象或翻译函数，支持兜底处理与localstorage持久化。
Vue 计算属性本身不翻译文本，但它能高效驱动多语言动态切换——关键在于把语言标识（如 locale）设为响应式数据，再让计算属性“盯住”它，自动返回对应语言包里的文案。
用 computed 封装当前语言对象
这是最轻量、无需插件的实现方式。核心是把语言包和 locale 绑定成一个可响应的对象：
- 定义扁平化语言包（推荐一级键名，易读易维护）：
const locales = { zh: { login: '登录', welcome: '欢迎回来' }, en: { login: 'Login', welcome: 'Welcome back' } }; - 在 Composition API 中声明响应式 locale：
const locale = ref('zh'); - 用 computed 返回当前语言对象：
const lang = computed(() => locales[locale.value] || locales.en); - 模板中直接使用：
{{ lang.login }}、{{ lang.welcome }}，改 locale 就立刻刷新所有绑定文案。
用 computed 返回翻译函数（支持动态键名）
不想为每个文案写一个计算属性？可以返回一个带参数的函数：
- 语言包需响应式（如用 ref 包裹）：
const messages = ref({ zh: { login: '登录' }, en: { login: 'Login' } }); - 定义翻译函数：
const t = computed(() => (key) => messages.value?.[locale.value]?.[key] || key); - 模板中调用：
{{ t.value('login') }}（注意必须加 .value，因为 t 是 ref 包裹的函数）。
语言包必须响应式，否则切换不生效
常见错误是把语言包写成普通对象，导致 Vue 无法追踪变化：
- ❌ 错误写法（硬编码非响应式）：
computed: { greeting() { return { zh: { greeting: '你好' } }[this.locale].greeting; } } - ✅ 正确做法：语言包必须是 ref 或 reactive 的，例如：
const messages = ref({ zh: { greeting: '你好' } });
再在 computed 中读取 messages.value[locale.value]。 - 异步加载时（如 await import('./locales/en.json')），赋值给 messages.value，计算属性会自动重算。
兜底处理与实际可用性增强
用户切到未完整配置的语言时，避免页面留空或报错：
- 缺失键时返回 key 本身：
messages.value?.[locale.value]?.[key] || key - 或 fallback 到默认语言：
messages.value?.[locale.value]?.[key] || messages.value?.zh?.[key] || key - 语言切换后建议同步写入 localStorage：
localStorage.setItem('locale', newLang)；
组件初始化时读取并赋值给 locale，防止首次渲染闪屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
