Vue 3 中 watch 实现多语言切换的核心是监听响应式 locale 并更新 i18n.locale.value，使 $t/t() 动态文案自动重渲染；静态文本无效，无需手动刷新。
Vue 3 中用 watch 实现多语言切换时实时刷新静态文案，核心不是靠 watch 去“刷新页面”，而是监听语言状态变化，触发 i18n 实例的 locale 更新，再让 Vue 模板自动响应式重渲染。关键在于：文案本身必须通过 $t 或 t() 函数动态读取，且语言标识（locale）需是响应式数据。
监听 locale 变化并更新 i18n 实例
如果你把当前语言存为一个 ref（比如 const currentLang = ref('zh')），就可以用 watch 监听它，并同步设置 i18n.locale.value：
- 确保 i18n 实例已通过
createI18n创建，并在 app 上挂载 -
locale必须是响应式 ref（i18n.locale本身是 ref） - watch 触发后直接赋值：
i18n.locale.value = newLang
模板中必须用 $t() 或 t() 动态取值
静态写死的文本（如 <h1>首页</h1>）不会随语言切换变化。必须改用函数调用：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 选项式 API：
<h1>{{ $t('menu.home') }}</h1> - 组合式 API：
<h1>{{ t('menu.home') }}</h1>（需先const { t } = useI18n()） - 所有文案都要从 messages 对象里按 key 查找，不能硬编码
避免手动刷新页面或强制重渲染
不需要调用 location.reload()、也不该用 key 强制组件卸载重建。vue-i18n 的设计就是响应式的：
立即学习“前端免费学习笔记（深入）”；
- 只要
i18n.locale.value改变，所有使用$t/t()的地方会自动更新 - 如果发现没更新，大概率是 locale 没正确赋值，或模板里用了字符串字面量而非函数调用
- 可配合
watch做副作用，比如切换后更新 document.title：document.title = t('common.title')
配合路由参数或 localStorage 自动同步语言
用户切换语言后，常需持久化并影响后续访问。可用 watch 实现联动：
- 监听
currentLang，自动写入localStorage.setItem('lang', newLang) - 监听
useRoute().query.lang，当 URL 带?lang=ja时，自动更新currentLang - 注意：不要在 watch 回调里重复调用
i18n.locale.value = ...多次，避免冗余赋值
