07.监听数据

使用watc函数，可以监听某个数据的状态。当这个数据被修改时，则会去调用我们写好的回调函数。

例子：

<template>
  <div>
    {{name}}
  </div>
</template>
<script>
export default {
  data(){
    return{
      name : 'tom'
    }
  },
  created(){
    setTimeout(()=>{
      this.name = 'marry';
    },2000);
  },
  watch:{
    name(newV,oldV){
      console.log('name被改变了，新的值是' + newV + "---" + '旧的值是' + oldV);
    }
  }
}
</script>

 

监听对象属性

监听对象属性发生变化，则需要在watch函数中传入 deep : true，代表深度监听。（上面的例子称为浅度监听）

例子：

<template>
  <div>
    {{people.name}} {{people.age}}
  </div>
</template>
<script>
export default {
  data(){
    return{
      people : {
        name : "tom",
        age : 18
      }
    }
  },
  created(){
    setTimeout(()=>{
      this.people.age = 20;
    },2000);
  },
  watch:{
    "people.age" : {
      deep:true,
      handler:(newV,oldV)=>{
        console.log('age被改变了，新的值是' + newV + "---" + '旧的值是' + oldV);
      }
    }
  }
}
</script>