$watch和watch属性的使用

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

用法一：

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

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

 

用法二：

watch:{
    xxx：（newVal,oldVal)=>{     // xxx是data里的数据
    
    }
}
//监听对象某个值的变化 
watch:{
    "xxx.value"：（newVal,oldVal)=>{     // xxx.value是data里对象的value
    
    }
}

举例<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:{
　　//开启深度监听
　　　deep:true,
　　//页面初始化立即执行
　　immediate: true
　　handler(newVal,oldVal){
        console.log(newVal);
        console.log(oldVal);
        
      },　　　　
    }
  },
};
</script>
<style lang="css" scoped>
</style>