vue侦听器

侦听器的作用是什么？

• 侦听某个变量值的改变
• 语法：

watch: {
    "被侦听的属性名" (newVal, oldVal){
        console.log(newVal，oldVal);
    }
}

例如侦听data的变量或者对象

<template>
  <div>
    <!-- 侦听器watch -->
    <input type="text" v-model="name">
    <input type="text" v-model="obj.age">

    {{name}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      name:'',
      obj:{
        age:18
      }
    }
  },
  // 侦听器
   watch:{
      name(newVla,oldVal){
       console.log(newVla,oldVal);
     }
   }
//当要侦听对象里面的某一个属性的时候需要用引号包裹
//或者使用深层侦听
  watch:{
    'obj.name'(newVla,oldVal){ //监听属性
      console.log(newVla,oldVal);
    }
  }

  // 侦听器完整写法
  // watch:{
  //   obj:{
  //     // 深层侦听，监听属性值
  //     deep:true,
  //     // 立即执行
  //     immediate:true,
  //     handler(newVal){
  //       console.log(newVal);
  //     }
  //   }
  // }

}
</script>

<style>

</style>

侦听器的完整写法

• 语法：

    watch:{
    属性名:{
      // 深层侦听，监听属性值
      deep:true,
      // 立即执行
      immediate:true,
      //处理函数
      handler(newVal){
        console.log(newVal); 
      }
    }
  }
  

• 用法：用与侦听复杂数据类型的变化