$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>