computed属性适合实现i18n动态切换，自动响应语言变化并缓存结果；支持直接映射、带参格式化、集成Vuex/Pinia全局状态及vue-i18n等成熟方案。
Vue.js 的 computed 属性非常适合实现国际化（i18n）文案的动态切换，它能自动响应语言状态变化，并缓存计算结果，避免重复渲染开销。
用 computed 封装多语言文案映射
将语言标识（如 locale）作为响应式数据，配合一个预定义的多语言对象，在 computed 中根据当前 locale 返回对应文案：
data() {
return {
locale: 'zh-CN'
}
},
computed: {
t() {
const messages = {
'zh-CN': {
welcome: '欢迎使用',
logout: '退出登录',
loading: '加载中...'
},
'en-US': {
welcome: 'Welcome',
logout: 'Logout',
loading: 'Loading...'
}
}
return messages[this.locale] || messages['zh-CN']
}
}
模板中直接使用 {{ t.welcome }} 即可，语言切换时 computed 自动更新。
支持带参数的文案格式化（如占位符）
可在 computed 中返回函数，实现动态插值：
computed: {
t() {
const messages = { /* 同上 */ }
const dict = messages[this.locale] || messages['zh-CN']
<pre class="brush:php;toolbar:false;">return {
...dict,
hello: (name) => `你好，${name}！`,
itemCount: (count) => `共 ${count} 条记录`
}} }
模板调用：{{ t.hello('张三') }} 或 {{ t.itemCount(5) }}。
结合 Vuex/Pinia 管理全局 locale 状态
当语言状态需跨组件共享时，把 locale 提到 store 中，computed 依赖 store 的 getter：
- Pinia 示例：在 store 中定义 locale state 和 currentLocale getter
- 组件内 computed 直接引用 store.currentLocale，并基于它查表或调用 i18n 实例
- 避免每个组件都维护 locale 数据，确保切换语言时所有 computed 文案同步响应
进阶：对接成熟 i18n 库（如 vue-i18n）
实际项目推荐使用 vue-i18n，它的 useI18n 组合式 API 内部就基于 computed 实现响应式文案：
- setup 中调用 const { t } = useI18n()，t 本身就是一个响应式 computed 函数
- 切换 locale 时，所有使用 t('key') 的地方自动更新，无需手动监听
- 支持命名空间、复数、日期/数字格式等高级能力，computed 逻辑由库内部封装好
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
