Vue Router中watch监听路由query数组的注意事项

在Vue Router项目开发中，我们经常需要监听路由参数的变化。最近有开发者反馈了一个关于watch监听路由query中数组参数的典型问题，这个问题揭示了Vue响应式系统中一个重要的行为特性。

问题现象

当我们在Vue组件中使用watch监听路由query中的数组参数时，可能会遇到一个看似奇怪的现象：即使数组内容相同，watch回调也会被触发。例如：

watch: {
  "$route.query.names"(newVal, oldVal) {
    console.log("names changed", newVal, oldVal);
  }
}

当路由query中的names参数在两个空数组[]之间变化时，watch回调仍然会被执行，这不符合部分开发者的预期。

原因分析

这个现象实际上是Vue响应式系统的设计特性。Vue在比较数组时会进行严格的相等性检查，而JavaScript中两个空数组[] === []的结果是false，因为它们指向不同的内存地址。

Vue Router在内部处理路由变化时，会创建一个新的query对象，即使内容相同，这个新对象也会触发watch回调。这与Vue的响应式优化机制有关——Vue只对基本类型值(value types)进行值比较优化，对于引用类型(reference types)如数组和对象，总是认为它们是"不同"的。

解决方案

针对这种情况，我们有以下几种解决方案：

1. 使用字符串代替数组：如果业务允许，可以将数组参数转换为字符串形式存储

// 路由跳转时
router.push({ query: { names: namesArray.join(',') } })

// watch监听时
watch: {
  "$route.query.names"(newVal) {
    const namesArray = newVal ? newVal.split(',') : []
    // 处理逻辑
  }
}

2. 使用计算属性进行转换：创建一个计算属性来处理数组的序列化

computed: {
  normalizedNames() {
    return JSON.stringify(this.$route.query.names || [])
  }
},
watch: {
  normalizedNames(newVal, oldVal) {
    if (newVal !== oldVal) {
      const names = JSON.parse(newVal)
      // 处理逻辑
    }
  }
}

3. 深度比较数组内容：如果需要保持数组形式，可以实现自定义的深度比较

watch: {
  "$route.query.names": {
    handler(newVal, oldVal) {
      if (!this.isEqual(newVal, oldVal)) {
        // 处理逻辑
      }
    },
    deep: true
  }
},
methods: {
  isEqual(a, b) {
    return JSON.stringify(a) === JSON.stringify(b)
  }
}

最佳实践

在实际项目中，处理路由query参数时建议：

1. 尽量使用简单类型(String, Number, Boolean)作为query参数
2. 对于复杂数据结构，考虑使用JSON序列化
3. 在watch回调中自行实现必要的相等性检查
4. 对于需要深度比较的场景，明确设置deep: true选项

理解Vue响应式系统的这些细节，可以帮助我们编写出更高效、更符合预期的路由监听逻辑，避免不必要的组件更新和性能损耗。