Vue3多语言站点computed搭配动态组件异常，如何用watcher优化？

问题根因 #

你遇到的偶发渲染错误确实是computed使用不规范导致的：

• computed要求是无副作用的纯函数，你在计算属性内修改this.currentRoute属于修改实例状态的副作用，会破坏computed的缓存机制，导致返回值和实际依赖不匹配
• 存在无返回值的边界场景：如果路由未匹配到de/en/es三个语言标识，两个计算属性都没有返回值，会导致动态组件加载异常

改造方案（Watcher实现） #

1. 模板部分无需修改，保持原结构即可： #

<component :is="selectedHeader"></component>
<router-view></router-view>
<component :is="selectedFooter"></component>

2. Script部分改造 #

删掉原有的computed配置，新增data存储状态、watcher监听路由变化即可：

<script>
export default {
  data() {
    return {
      // 存储动态组件名，给默认值避免初始加载异常
      selectedHeader: 'en-header',
      selectedFooter: 'en-footer',
      currentRoute: ''
    }
  },
  watch: {
    // 直接监听vuex中存储的路由数据，变化时自动触发更新
    '$store.getters.getRoute': {
      immediate: true, // 初始加载时立即执行一次，不用额外写created初始化
      handler(newRoute) {
        this.currentRoute = newRoute
        if (!newRoute) return
        // 提取语言标识，不用写重复if判断，更易维护
        let lang = 'en' // 默认语言可按需调整
        if (newRoute.includes('de')) lang = 'de'
        if (newRoute.includes('en')) lang = 'en'
        if (newRoute.includes('es')) lang = 'es'
        // 动态拼接组件名
        this.selectedHeader = `${lang}-header`
        this.selectedFooter = `${lang}-footer`
      }
    }
  }
}
</script>

额外优化建议 #

如果你的路由语言标识是固定在路径的固定位置（比如/de/xxx、/en/xxx的第一级路径），可以直接从this.$route.params或者路由元信息取语言标识，不用依赖vuex存储路由数据，进一步减少中间层导致的异常风险。

内容的提问来源于stack exchange，提问作者user1953346