【vue回顾系列】08-关于watch监听的小小总结

本文详细介绍了Vue.js中的监听器(watch)的使用,包括如何初始化监听、深度监听、监听data状态、监听路由变化、监听计算属性以及监听props的数据。强调了监听的概念、触发时机以及在不同场景下的应用,同时提供了优化性能的建议和注意事项。
摘要由CSDN通过智能技术生成

概念

用于监视某个状态的改变,是在视图层更新之后,监听的值改变了,才执行的监听,所以并不是数据一更新就立马监听到了。触发顺序在$nextTick()之前,触发时间在beforecreate和created之间。


怎么写

// 平时可简写
watch: {
  xxx(newVal, oldVal) {
  // ...
  }
}

// 默认的写法应该是,如果自己写handler内部,相当于重构了监听函数
watch: {
  xxx:{
     handler(newVal, oldVal) {
     // ...
    }
  }
}

初始化监听

// 默认最初绑定的时候是不会执行的,要等到xxx改变时才执行监听计算。
watch: {
  xxx: {
    handler(newVal, oldVal) {
      // ....
    },
    // 代表在wacth里声明了xxx这个方法之后立即带着原始值先去执行handler方法
    immediate: true
  }
}

适合用在传props的值无改变,结果没触发监听,导致存不到值的情况。注意最开始的时候oldVal= undefined。

深度监听

例如监听的是一个对象,那么当通过视图层只改变对象其中一个属性的时候,watch不会监听到,开启深度监听(不建议监听数组开启这个)。

deep: true

deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

解决开销大的方法,用字符串的形式精准监听

watch: {
  'obj.a': {
    handler(newVal, oldVal) {
       // ...
    },
    immediate: true,
    // deep: true
  }
}

监听data状态

data() {
  return {
    mes: '1'
  };
},
watch:{
  mes(newVal, oldVal){
     console.log('旧值', oldVal)
     console.log('新值', newVal)
  }
}

监听某个具体的状态

data() {
  return {
    mes: {
      a: '1'
    }
  };
},
watch:{
  'mes.a'(newVal, oldVal){
     console.log('旧值', oldVal)
     console.log('新值', newVal)
  }
}

监听路由的变化

监听整个路由

watch: {
  $route: {
    handler(to, from) {
      console.log("去哪", to);
      console.log("来自哪", from);
    },
    immediate: true
  },
},

只监听个别参数

watch: {
  '$route.path': {
    handler(to, from) {
      console.log("去哪", to);
      console.log("来自哪", from);
    },
    immediate: true
  },
},

监听计算属性

watch: {
  // 如果正在播放的歌曲发生变化(和还有没播放歌曲时要求播放歌曲),那么重新请求歌曲播放资源地址
  currentSong(newVal, oldVal) {
    if (oldVal === undefined || newVal.id !== oldVal.id) {
      this.getMusicUrl(newVal.id);
      this.getLyricData(newVal.id);
    }
  }
}

监听props的数据

watch:{
  xxx(newVal, oldVal){
    this.propsdata = this.propsProps
  }
}

如果需要对props值进行修改,且props传进来的值是会动态的,建议监听后存放在data中再使用。

写在生命周期的监听

可以把watch写在created和mounted中

this.$watch('something', (newval, oldVal) => {
   ...
})

注意

由于触发的时间在created之前,所以执行method的方法的时候要考虑一些值的状态问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值