了解vue中的watch侦听器和deep深度监听

 注意:一定要把表单里v-model的值在data节点下定义初始化属性!!!

watch侦听器允许开发者监视数据的变化 从而对数据的变化做特定的操作

所有的侦听器都应该被定义在watch节点下

案例:输入框里每输入一个值 侦听器都能监听到

<template>
  <div class="news">
    <p>侦听器</p>
    <input type="text" v-model="listens">
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      listens:"", // 侦听器
    };
  },
  methods: {
  },
  // 侦听器
  watch:{
    listens(newVal,oldVal){
      console.log('新输入的值'+newVal+',上一次输入的值'+oldVal);
    }
  }
};
</script>

如果要监听的是对象 则需要使用deep选项 设置为true即可

关于handler   全局搜索里只有一个 我也不太理解 为何加上这个

<template>
  <div class="news">
    <p>侦听器</p>
    <input type="text" v-model="info.username">
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      info:   //用户的信息对象
        {
          username:'admin',
        }
      
    };
  },
  methods: {
  },
  // 侦听器
  watch:{
    // listens(newVal,oldVal){
    //   console.log('新输入的值'+newVal+',上一次输入的值'+oldVal);
    // }
    info:{
      handler(newVal){
        console.log(newVal);  
      },
      deep:true  //开启深度监听 只要对象中任何一个属性变化 都会触发'对象的侦听器'
    }

  }
};
</script>