vue侦听器 基础4

Posted 2020-11-22 shcs

侦听器

　　使用方式：设置需要侦听的data里的属性名就可以了

new Vue({
      el:"#app",
      data:{
        count:0
      },
      watchers:{
        count(){
          //this.count 发生了改变
        }
      }
    })

　　侦听器适合异步操作

　　监听data对象中某个对象的属性

　　 　　‘count.test‘(){//变化触发  this.count.test}

　　获取旧值：

　　　　‘count.test‘(newval,oldval){ console.log(newval,oldval)  }   其中newval等于this.count.test

　　深度监听：

　　　　当监听一个对象，是想监听整个对象，而不仅仅是一个属性，如count是一个对象，this.count.test发生了变化，监听的是整个count，那么对应的监听器不会触发，只有在整对象被替换更改才会被触发

　　　　监听整个对象被称为深度监听，通过设置deep为true来开启这一特性

watchers:{
        count(newval,oldval){
          console.log(newval,oldval)
        },
        deep:true
      }