ウォッチリスナーとVueでのディープリスニングについて学ぶ

 注：v-modelの値の初期化属性は、データノードの下に必ずフォームで定義してください!!!

ウォッチリスナーを使用すると、開発者はデータの変更を監視し、データの変更に対して特定の操作を実行できます

すべてのリスナーは、監視ノードの下で定義する必要があります

ケース：入力ボックスに値が入力されるたびに、リスナーはその値を聞くことができます

<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に設定する必要があります

グローバル検索にハンドラーが1つしかない理由がよくわかりません。

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