vue中如何一次性监听多个数据?

答:有三种方式实现:

(1)watch里面写多个监听方法;

(2)将多个数据放在一个对象中,只监听这个对象的变化;

(3)computed和watch连用,watch监听computed的属性:

computed属性会在依赖变化后重新计算,如果我们在某个computed属性中依赖于我们想要监听的属性,当这些属性变化时,此computed属性也会被重新计算,然后只需监听此computed属性即可;利用computed属性依赖变化会导致重新计算的机制可以更加优雅的实现同时监听多个属性变化的效果,而且由于computed是有缓存机制的,性能上也更具优势。

方式(3)代码如下:

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);
    }
  }
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值