watch监听器三种监听方式

文章详细介绍了Vue.js中watch的三种用法:普通监听无法捕获初始绑定变化,设置immediate为true可解决,而deep:true实现深度监听以追踪对象内属性变化。对于仅需监听对象特定属性的情况,提供了优化方案。
摘要由CSDN通过智能技术生成

1、普通监听(无法监听到第一次绑定的变化

这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。

//当text发生变化时触发
watch: {
    text(newVal, oldVal) {
        console.log(newVal)
    }
}

2、普通监听(可以监听到第一次绑定的变化)

给 text 绑定了一个handler方法,之前我们写的 watch 方法其实默认写的就是这个handler,Vue.js会去处理这个逻辑,最终编译出来其实就是这个handler。

设置immediate为true,可以在第一次绑定值的时候执行监听函数,否则只有值改变的时候才会执行。

watch: {
    text: {
        handler (newVal, oldVal) {
            console.log(newVal)
        },
        immediate: true,
    }
}

3、深度监听(可以监听到对象内属性的变化)

设置deep: true 则可以监听到text.value的变化,此时会给text的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。

data (){
    return {
        text: {
           value:'一一',
        }
    }
},
watch: {
    text: {
        handler(newVal, oldVal) {
            console.log(newVal)
        },
        immediate: true,
        deep: true,
    }
}

如果只需要监听对象中的一个属性值,则可以做以下优化:

 watch: {
    'text.value': {
      handler(newVal, oldVal) {
         console.log(newVal)
      },
      deep: true,
      immediate: true
    }
  }

是的,watch监听器可能会对性能产生一定的影响。当你在Vue.js或React等框架中使用watch监听器时,它会监视特定的数据变化,并在数据发生变化时执行相应的操作。然而,由于watch监听器需要持续监测数据的变化,这可能会导致一些性能上的损耗。 具体而言,watch监听器可能会导致以下性能问题: 1. 频繁触发:如果你的数据变化非常频繁,watch监听器可能会被频繁触发,从而导致不必要的计算和操作,进而影响性能。 2. 深度侦听:默认情况下,watch监听器会对数据进行深度侦听,即递归遍历对象的每个属性。对于大型的复杂对象或数组,深度侦听可能会导致性能下降。 3. 异步处理:在某些情况下,watch监听器可能会异步处理数据变化。这意味着它们不会立即触发相应操作,而是等待一定时间或下一个事件循环才执行。这种异步处理可能会对性能产生一些影响。 为了避免watch监听器对性能产生不利影响,可以考虑以下几点: 1. 优化watch监听器:确保你的watch监听器尽可能简洁和高效。避免在监听器中做复杂的计算或耗时的操作。 2. 使用computed属性:如果你只是为了根据数据变化计算出一个值,并不需要执行一些副作用操作,可以考虑使用computed属性替代watch监听器。computed属性会在相关数据发生变化时自动更新,而无需手动监听。 3. 减少监听的数据量:如果你的watch监听器只需要关注特定的数据变化,可以通过配置选项来减少监听的数据量,以提高性能。 总之,尽管watch监听器可能会对性能产生一定的影响,但在大多数情况下,这种影响是可以接受的。合理地使用和优化watch监听器,可以有效地平衡功能需求和性能要求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值