Vue计算属性适合配合i18n实现响应式语言切换：封装locale、messages和映射逻辑于计算属性，支持动态翻译、localStorage持久化及插值/复数等进阶功能。

Vue 计算属性本身不直接处理国际化，但它非常适合配合 i18n 方案做响应式语言切换 —— 关键在于把语言包、当前 locale 和文本映射逻辑封装进计算属性，让模板自动更新。

准备多语言资源对象

先定义一个简单清晰的语言包结构，比如：

const messages = {
  zh: { greeting: '你好', login: '登录', logout: '退出' },
  en: { greeting: 'Hello', login: 'Login', logout: 'Logout' }
};

推荐用单独的 locales/ 目录管理 JSON 文件，再统一导入。确保 key 一致、层级扁平，避免嵌套过深影响计算属性取值效率。

在组件中用计算属性读取翻译文本

不要在模板里写 {{ $t('greeting') }} 这类调用（除非用 vue-i18n 插件），而是用计算属性封装翻译逻辑：

• 在 data 中声明 locale: 'zh' 作为当前语言标识
• 定义计算属性 $t，根据 locale 和传入 key 动态返回对应文案
• 示例写法（不依赖插件）：

computed: {
  $t() {
    const lang = this.locale;
    return (key) => messages[lang]?.[key] || key;
  }
}

这样模板中就能写 {{ $t('greeting') }}，且切换 this.locale 时自动刷新。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

响应式切换语言并持久化

切换语言不只是改个变量，还要考虑用户偏好留存和页面刷新后恢复：

• 提供切换方法，如 changeLocale(newLang)，内部更新 this.locale = newLang
• 用 localStorage.setItem('locale', newLang) 记住选择
• 在组件 created 或 setup 中读取 localStorage 初始化 locale，避免首次加载闪动为默认语言
• 如果项目有全局状态（如 Pinia），建议把 locale 提到 store 管理，所有组件自动响应

进阶：支持带参数的翻译和复数规则

纯 key-value 不够用？可在计算属性中扩展函数能力：

• 让 $t 支持第二个参数：对象插值，如 $t('welcome', { name: '张三' })
• 对数字型内容做简单复数判断（例如 itemCount === 1 ? 'item' : 'items'），或借助 Intl.PluralRules
• 注意：复杂场景（如日期、货币格式）建议交由 vue-i18n 或 i18next 处理，它们已深度优化这些逻辑

不复杂但容易忽略 —— 真正让计算属性发挥价值的，是把“语言”当作响应式数据源来用，而不是把它当成一次性的工具函数。

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