vue2 深度监听 this.$route.query

Vue2 中深度监听 `this.$route.query` 可以通过监听路由参数的变化来动态响应视图。在 Vue 实例中，你可以使用 `watch` 方法结合 `deep: true` 参数来实现这一功能。例如：

export default {
  data() {
    return {
      queryParams: {}
    }
  },
  watch: {
    $route({ query }) {
      this.queryParams = query // 将查询参数复制到自定义的数据属性里
      // 这里可以对 queryParams 进行深度处理或更新视图
      // 如果有需要，还可以触发一些组件内部的更新操作
      this.updateComponentState();
    },
    queryParams: {
      handler(newQuery) {
        // 当 queryParams 发生变化时，这个回调会被调用
        // 注意这里不需要 deep: true，因为我们在上面已经做了深拷贝
        this.updateViewBasedOnNewQuery(newQuery);
      },
      deep: true // 对于嵌套的对象或数组，需要设置 deep 为 true 来进行深度监听
    }
  },
  methods: {
    updateComponentState() {
      // 更新组件状态或其他业务逻辑
    },
    updateViewBasedOnNewQuery(newQuery) {
      // 根据新的 queryParams 更新视图
    }
  }
}