$watch和watch属性的使用

佚名 6年前 (2019-05-16) 随笔 796人围观抢沙发百度已收录

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

用法一：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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

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

用法二：

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

监听对象某个值的变化

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

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

  //深度监听
    obj:{
      handle(newVal,oldVal){
        
        
      }
    }

例子：

<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);
        
      }
    }
  },
};
</script>
<style lang="css" scoped>
</style>