vue计算属性通过响应式locale驱动多语言切换：将语言包设为ref/reactive，computed返回当前语言对象或翻译函数，模板中使用{{lang.key}}或{{t.value('key')}}，缺失键时兜底返回key或默认语言。

Vue计算属性本身不直接做翻译，但它能高效驱动多语言切换——关键在于把语言标识（如locale）设为响应式数据，再让计算属性“盯住”它，自动返回对应语言包里的文案。

用 computed 包一层实时语言对象

这是最轻量、无需额外插件的实现方式。核心是把语言包和当前 locale 绑定成一个可响应的对象：

• 定义扁平化语言包（推荐一级键名，易读易维护）：
  const locales = { zh: { login: '登录', welcome: '欢迎回来' }, en: { login: 'Login', welcome: 'Welcome back' } };
• 在组件中声明响应式 locale：
  data() { return { locale: 'zh' } } 或 Composition API 中 const locale = ref('zh')
• 用 computed 返回当前语言对象：
  computed: { lang() { return locales[this.locale] || locales.zh; } }

模板里直接写 {{ lang.login }}，改 this.locale 就立刻刷新所有文案。

支持动态键名：返回函数的 computed（Composition API）

不想为每个文案都写一个计算属性？可以用 computed 返回一个翻译函数：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• const messages = ref({}); // 异步加载的语言包
• const locale = ref('zh');
• 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[this.locale]
• 异步加载时，用 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
• 避免用 Object.freeze 封装语言包，它会阻止响应式代理生效

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！