博客

一般来说Vue中监听属性值的变化时，是在

watch

中针对各属性值单独设置监听函数：

var vm = new Vue({
  data: {
    sourceType: 1,
    sourceOrder: 2,
    sourceStatus: 3,
  },
  watch: {
    sourceType: function (val, oldVal) {},
    sourceOrder: function (val, oldVal) {},
    sourceOrder: function (val, oldVal) {},
  }
})

在最近的业务中需要实现包含多个筛选器的组件，每个筛选器变化时需要向外抛出当前的筛选条件，这就需要可以同时响应多个属性的变化，那应该怎样实现呢？

指定同一个响应函数

最先想到的方案肯定是为它们指定同一个响应函数：

var vm = new Vue({
  data() {
    return {
      sourceType: 1,
      sourceOrder: 2,
      sourceStatus: 3,
    }
  },
  methods: {
    onChange(val, oldV) {
      const { sourceType, sourceOrder, sourceStatus } = this;
      this.$emit('change', {
        sourceType,
        sourceOrder,
        sourceStatus,
      });
    }
  },
  watch: {
    sourceType: 'onChange',
    sourceOrder: 'onChange',
    sourceStatus: 'onChange',
  }
})

可以指定method的字符串形式作为监听的回调函数。

虽然看起来这样实现没什么问题，但是看起来很不优雅，不符合DRY的准则，所幸我们可以利用Vue中的

computed

机制达到我们想要的结果：

computed属性


computed

属性会在依赖变化后重新计算，如果我们在某个

computed

属性中依赖于我们想要监听的属性，当这些属性变化时，此

computed

属性也会被重新计算，然后只需监听此

computed

属性即可：

var vm = new Vue({
  data() {
    return {
      sourceType: 1,
      sourceOrder: 2,
      sourceStatus: 3,
    }
  },
  computed: {
    changeData() {
      const { sourceType, sourceOrder, sourceStatus } = this;
      return {
        sourceType,
        sourceOrder,
        sourceStatus,
      };
    }
  },
  watch: {
    changeData: function(newV) {
      this.$emit('change', newV);
    }
  }
})

利用

computed

属性依赖变化会导致重新计算的机制可以更加优雅的实现同时监听多个属性变化的效果，而且由于

computed

是有缓存机制的，性能上也更具优势。