$watch和watch属性的使用

$watch和watch属性都是监听值的变化的,是同一个作用，但是有两个不同写法。

用法一：

this.$watch((newVal,oldVal)=>{ })

 

注意：这种方法是监听不到对象的变化的。

 

用法二：

watch:{
    xxx：（newVal,oldVal)=>{     // xxx是data里的数据
    
    }
}

 

监听对象某个值的变化 

watch:{
    "xxx.value"：（newVal,oldVal)=>{     // xxx.value是data里对象的value
    
    }
}

 

监听整个对象的变化(深度监听) ,handle方法：

  //深度监听
    obj:{
      handler(newVal,oldVal){
        
        
      },
　　　　deep:true
    }

 

 

例子：

<template>
  <div>
    <input type="text" v-model="name">
    {{name}}
    <input type="text" v-model="age">
    {{age}}
    <input type="text" v-model="obj.id">
    {{obj.id}}
    <input type="text" v-model="obj">
    {{obj}}
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      name: "",
      age: "",
      obj: {
        id: "1",
        addr: "gz"
      }
    };
  },
  created() {
    this.obj = {
      id:"99",
      addr:"gd"
    }
    // 用法一：  this.$watch("要监听的值",(oldVal,newVal)=>{ })
    this.$watch("name", (newValue, oldValue) => {
      console.log(newValue + "_新值");
      console.log(oldValue + "_旧值");
    });
    //这样监听不到对象的变化的
    this.$watch("obj", (newval, oldval) => {
      console.log(newval);
      console.log(oldval);
    });
  },
  //用法二：
  watch: {
    age: (newValue, oldValue) => {
      console.log(newValue);
      console.log(oldValue);
    },
    // 监听对象中的某个属性的变化
    "obj.id":(newVal,oldVal)=>{
      console.log(newVal);
      console.log(oldVal);
      
    },
    //深度监听
    obj:{
      handler(newVal,oldVal){
        console.log(newVal);
        console.log(oldVal);
        
      },
　　　　deep:true
    }
  },
};
</script>
<style lang="css" scoped>
</style>