美文网首页
深度监听(vue中watch的deep)

深度监听(vue中watch的deep)

作者: 清苑折纸 | 来源:发表于2021-07-24 17:57 被阅读0次

当监听的是对象属性,手动修改对象的某个属性值是会发现,监听并没有生效,此时我们需要用到watch的deep属性,当deep为true时它会一层层遍历给对象的所有属性都加上这个监听函数,这样可以检测到对象的每个属性变化,但是这样做会造成更大的性能开销。

data:{
    obj:{
      a:1
    }
},
watch:{
    obj:{
      handler(newName,oldName){
          //...
      },
      deep:true //为true,表示深度监听,这时候就能监测到a值变化
    }
}

优化:可以使用字符串监听,即给对象会改变的属性指定该监听器,这样只有遇到该属性才会给其设置监听器,而不是给对象的所有属性都加上监听函数。

data:{
    obj:{
      a:1
    }
},
watch:{
    'obj.a':{
      handler(newName,oldName){
          //...
      },
      deep:true //为true,表示深度监听,这时候就能监测到a值变化
    }
}

例如之前动态修改echarts配置属性中的data值

相关文章

网友评论

      本文标题:深度监听(vue中watch的deep)

      本文链接:https://www.haomeiwen.com/subject/jxjvmltx.html