十.vue侦听器

侦听器

监听 实例上的 某个属性的值得变化

const vm = new Vue({
  el:"#app",
  data:{
    msg:"",
    obj:{
      a:10,
      b:20
    }
  }, 
  watch:{
    msg(newVal, oldVal){
      console.log(`值变化了，新值是${newVal},旧值是${oldVal}`)
      // 监听的是非对象的数据 直接在watch中新增一个同名的方法即可
    },
    // 监听对象
    "obj.a"(newVal, oldVal){
      console.log(`值变化了，新值是${newVal},旧值是${oldVal}`)
      /* 
      监听对象 直接新增同名方法无法监听，
      方法1，直接监听该对象的属性
      新增 "对象.属性"(){} 这样方法
      */
    },
    // 监听对象  深度监听
    obj:{
      handler(newVal,oldVal){
          //只能获取到新的值，不管是newVal还是oldVal
      },
      deep:true
    }
  }
})

例子:
<div id="app">
        <input type="text" v-model="msg">
        {{msg}}
        <input type="text" v-model="obj.a">
        {{obj.a}}
</div>
<script type="text/javascript">
    const vm= new Vue({
        el:"#app",
        data:{
            msg:"",
            obj:{
                a:10,b:20
            }
        },
        watch:{
            msg(newVal,oldVal){
                console.log("变化了，新值是"+newVal+"旧值是"+oldVal);
            },
            "obj.a"(newVal,oldVal){
                console.log("变化了，新值是"+newVal+"旧值是"+oldVal);
            },
            obj:{
                handler(oldVal,newVal){
                    console.log(newVal,oldVal);
                },
                deep:true
            }
        }
    })
</script>