vue侦听器

侦听器

可以侦听data/computed属性值改变

浅侦听

语法

//浅侦听  侦听的是基本数据类型
watch:{
  '被侦听的属性名'(newval,oldval){
  
  }
}

深度侦听

语法

//侦听复杂数据类型  深度侦听
watch：{
  // 侦听复杂数据类型
     '被侦听的属性名':{
        handler(newval,oldval){
           console.log(newval,oldval,"深度")
        },
        deep:true,  //深度监听 (对象里层的值改变)
        //  immediate:true, //立即监听  （网页打开handler执行一次
      }
}

   <div id="app">
    姓名:<input type="text" v-model="name"/>
<hr>
    {{obj.name}}--{{obj.age}}

    <button @click="++obj.age">年龄自增</button>
   </div>

new Vue({
  el:"#app",
  data:{
   //  name:"",
    obj:{
      name:'[zs]',
      age:9
    }
  },
 //  侦听name值的改变
 watch:{
   // newval 当前最新值
   // oldval 改变前的值
   name(newval,oldval){
     console.log(newval,1)
     console.log(oldval,2)
   },
   // 侦听复杂数据类型
   obj:{
     handler(newv,oldv){
        console.log(newv,oldv,"深度");
     },
     deep:true,  //深度监听 (对象里层的值改变)
     // immediate:true, //立即监听  （网页打开,handler执行一次
   },
   'obj.age'(newv,oldv){
     console.log(newv,oldv,'obj.age');
     deep:true
   }
 }
})

中间的

// 侦听复杂数据类型
   obj:{
     handler(newv,oldv){
        console.log(newv,oldv,"深度");
     },
     deep:true,  //深度监听 (对象里层的值改变)
     // immediate:true, //立即监听  （网页打开,handler执行一次
   },

部分，侦听到之后，输出的newv和oldv指向的都是新数据对象，得不到旧数据，现在还不理解为什么，先给个传送门

数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。
对象内某个属性产生变化，直接监听该对象是监测不到变化的，只能监听该对象的属性变化。