重新认识vue中watch用法

wade

发布于 2020-04-24 10:02:16

6600

发布于 2020-04-24 10:02:16

文章被收录于专栏：coding个人笔记

vue使用了真的很长时间了，但越是使用，越是去看api，就越发现，一直使用的api都仅仅是使用，而且使用的还不够到位。之前分享过计算属性computed和watch的区别，今天因为有个需求使用watch，重新看了一下官网文档，发现对watch一无所知。

watch观察vue实例的变化，回调函数参数为新值和旧值，先看基础写法：

watch:{
  msg(a, b){
    console.log(a);
    console.log(b);
  }
},

watch监听的必须是data的数据，当数据发生改变，就会执行。

有配置的写法：

msg: {
  handler:(a, b) =>{
    console.log(a);
    console.log(b);
  },
  deep: true,
  immediate: true
}

deep:为了发现内部值的变化，数组不需要，简单说就是一个对象如果想要监听深层次的变化，想要使用，普通变量是不需要的。

immediate：是否初始化就触发，true为立即执行，注意，如果使用了，新值是undefined。

watch可以监听数组：

watch:{
  arr(a, b){
    console.log(a);
    console.log(b);
  },
},

要注意，对象可以直接监听某个key:

watch:{
  'obj.a'(a, b){
  console.log(a);
  console.log(b);
},
},

当a变化的时候是可以监听到的，如果不写deep，是不能监听到的：

watch:{
 obj(a, b){
  console.log(a);
  console.log(b);
 },
},

上面obj有变化的时候不执行，下面的方法才会执行：

obj: {
  handler: (a, b) => {
    console.log(a);
    console.log(b);
  },
  deep: true
}

有一点要注意，在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。这也是为什么说computed性能会好一些，computed是从缓存中获取:

watch:{
  obj: {
    handler: (a, b) => {
      console.log(a);
      console.log(b);
    },
    deep: true
  }
},

输出的新值旧值都是一样的

vm.$watch 返回一个取消观察函数，用来停止触发回调，但是不知道在实例里面怎么操作。

（完）

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-11-05，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度