intelligent-etmf-system-applet/LANGUAGE_SWITCH_OPTIMIZATION.md

语言切换优化说明

优化目标

点击语言切换时，只切换文本语言环境，避免不必要的页面重绘。

实施的优化措施

1. 页面级优化 (pages/login/login.vue)

添加防抖保护

• 添加 isLanguageSwitching 状态标志
• 防止300ms内的重复点击
• 避免频繁触发语言切换

使用 nextTick 优化更新时序

const switchLanguage = async () => {
  // 防止频繁切换
  if (isLanguageSwitching.value) return
  
  isLanguageSwitching.value = true
  
  try {
    // 直接切换语言
    localeStore.toggleLocale()
    
    // 等待 DOM 更新完成
    await nextTick()
    
    // 异步更新导航栏标题
    uni.setNavigationBarTitle({
      title: t('login.title')
    })
  } finally {
    // 300ms后允许再次切换
    setTimeout(() => {
      isLanguageSwitching.value = false
    }, 300)
  }
}

2. Store级优化 (store/locale.js)

添加相同语言检查

if (currentLocale.value === locale) {
  return true  // 语言相同，直接返回，避免无效更新
}

异步持久化操作

• 将 uni.setStorageSync 改为异步执行
• 不阻塞UI线程
• 优先保证用户体验

优化更新顺序

// 先更新 store 状态
currentLocale.value = locale
// 再更新 i18n
i18n.global.locale.value = locale
// 最后异步持久化
setTimeout(() => {
  uni.setStorageSync('locale', locale)
}, 0)

优化效果

性能提升

1. 减少不必要的响应式触发：通过相同语言检查
2. 批量更新：使用 nextTick 合并更新
3. 异步持久化：不阻塞UI线程
4. 防抖保护：避免频繁切换造成的性能损耗

用户体验改善

1. 流畅的文本切换：语言切换更加平滑
2. 无卡顿：异步操作不影响UI响应
3. 即时反馈：文本立即更新，存储在后台完成

技术原理

Vue i18n 响应式机制

• i18n.global.locale 是响应式的
• 改变时会触发所有使用 $t() 的组件更新
• 这是正常的文本更新，不是"重绘整个页面"

nextTick 的作用

• 确保状态更新在同一个事件循环中完成
• 减少多次渲染
• 在 DOM 更新后执行回调

异步策略

• 将非关键操作（如持久化）延迟执行
• 优先响应用户交互
• 提升感知性能

注意事项

1. 语言切换本质：Vue i18n 的设计就是在语言切换时更新所有翻译文本，这是必要的
2. 不是完全避免重绘：文本内容变化必然触发文本节点的重新渲染
3. 优化的是：减少不必要的重复更新、避免阻塞操作、提升切换流畅度

测试建议

1. 快速连续点击语言切换按钮，应该有300ms的节流保护
2. 切换语言后，所有文本应立即更新
3. 页面不应出现明显的卡顿或闪烁
4. 存储操作在后台完成，不影响UI

后续优化方向

如果仍需进一步优化，可以考虑：

1. 使用虚拟滚动减少大量文本节点的影响
2. 按需加载语言包，减少初始包体积
3. 使用 Web Worker 处理语言包解析
4. 实现增量更新策略（仅更新可见区域）