组件状态不会自动重置或刷新，需通过 watch 监听 i18n.global.locale.value 变更，在 setup 中触发数据重拉、表单重置或 UI 刷新，并在 onActivated 中处理 keep-alive 下的语言更新。
多语言切换时，组件状态不会自动重置或刷新，因为 Vue 的响应式系统默认不监听 i18n.locale 变化来触发重新渲染。要让组件在语言切换后正确更新内容、重载数据或重置内部状态，需结合生命周期钩子与 i18n 状态变化主动干预。
监听 locale 变化并响应更新
Vue-i18n v9（Composition API 模式）中，i18n.global.locale 是一个 ref，可使用 watch 监听其变更：
- 在
setup中引入useI18n和watch - 监听
i18n.locale.value，触发数据重拉、表单重置或 UI 逻辑刷新 - 避免在
onMounted中仅做一次初始化，而忽略后续语言切换
关键钩子的典型用法
onBeforeMount：适合预加载当前语言包（若采用异步加载），但注意此时 i18n 实例可能尚未就绪，建议改用 watch + tryLoadLanguage 方式；
onUpdated 不适用——它响应的是组件自身响应式数据变化，而非 i18n locale；
onActivated（keep-alive 场景）：语言切换后若组件被缓存，需在此钩子中检查 locale 是否变更，并手动刷新内容。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
配合状态重载的实用策略
语言切换常伴随以下需求，需在监听到 locale 变更后执行：
- 调用
api.getList({ lang: i18n.locale.value })重新获取带翻译的列表数据 - 重置表单字段的 placeholder、label 文本（通过
$t重新计算） - 清空依赖语言的本地缓存（如 localStorage 中按语言隔离的配置）
- 对图表、富文本等第三方组件，调用其 update/refresh 方法同步语言
避免常见陷阱
不要在 onMounted 里只做一次初始化后就不再响应 locale 变化；
不要直接修改组件 data 中的翻译字符串（如 title: this.$t('home.title')），应始终用计算属性或 $t 函数动态读取；
若使用 defineComponent + setup，确保 useI18n() 调用在顶层，否则无法响应全局 locale 更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
