Vue利用computed配合watch实现监听多个属性的变化 （解决每监听一个属性变化，就要调用一次接口，刷新数据）

原始方法（逐个监听）

1. 当传递多个属性，而对应的接口，也需要传递过来的这几个属性作为入参的话，以下方法，不建议使用。

watch: {
    open: {
      handler(val) {
        if (val) {
          this.getList();
        }
      },
      // 是否深度监听
      deep: false,
      // 是否立即监听
      immediate: true
    },
    deptId: {
      handler(val) {
        if (val) {
          this.getList();
        }
      },
      deep: false,
      immediate: true
    },
    id: {
      handler(val) {
        if (val) {
          this.getList();
        }
      },
      deep: false,
      immediate: true
    }
    // 。。。。。。。。。。。。。。。
  }

computed配合watch实现

1. 因为watch可以监听计算属性computed，可以通过computed把所有要监听的数据组成对象，再去监听该对象。

computed: {
    //   只要open, id, deptId这些某个值变动，那queryData对应的也就变动，watch就可以监听到。
    queryData() {
      const {open, id, deptId} = this
      return{
      open, id, deptId
      }
    }
  },
  watch: {
  // 监听queryData的变化
    queryData: {
      handler(newVal) {
        if (newVal.open) {
          this.getList();
        }
      },
      deep: true,
      immediate: true
    }
  },