原始方法(逐个监听)

  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
    }
  },
Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐