VUEウォッチリスナーの基本的な使い方の詳しい説明

<div id="アプリ">
    <input type="text" v-model="firstName" />
</div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <スクリプト>
var vm = 新しい Vue({
    el:"#アプリ",
    データ：{
        firstName:"张"
    },
    時計：{         
        firstName：(新しい値、古い値){
//firstNameは監視したいデータの名前です。v-modelのfirstNameを監視するなど、監視したい関数名を使用します。                    
//newVal: 変更後の値、つまり最初のパラメータを示します。位置を入れ替えないでください。//oldVal: 変更前の値を示します。
            console.log({newVal,oldVal}); // {newVal: "陈", oldVal: "张"}
        }
        // 監視関数を直接記述し、cityName 値が変更されるたびに関数を実行します。
        // 監視データの直後に文字列形式でメソッド名を追加することもできます: firstName: 'nameChange'
    },
    方法:{
        名前変更(){
         }
    }
})
 vm.firstName = "陈"; // 監視対象の値を変更する</script>

時計：
  ファーストネーム： {
    ハンドラ(新しい名前、古い名前) {
      this.fullName = newName + ' ' + this.lastName;
    },
    { 即時: true }
  }
}

<div id="アプリ">
    <div>
        <p>番号: {{ myNumber }}</p>
        <p>数値: <input type="text" v-model.number="myNumber"></p>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スクリプト>
新しいVue({
    el: '#app',
    データ： {
        myNumber: 'Dawei'
    },
    時計：
        私の番号: {
            ハンドラ(newVal, oldVal) {
                コンソールにログ出力します。
                コンソールにログ出力します。
            },
            //immediate が true の場合、コールバック関数はすぐにトリガーされます。false の場合、上記の例と同様に、コールバックはすぐには実行されません。
            即時: 真
          }
      }
 })
</スクリプト>
//ハンドラメソッドはウォッチで実行する必要がある特定のメソッドです

 <div id="ルート">
    <p>obj.a: {{obj.a}}</p>
    <p>obj.a: <input type="text" v-model="obj.a"></p>
</div> 
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <スクリプト>
    新しいVue({
        el: '#root',
        データ： {
            オブジェクト: {
                 123 です
            }
        },
        時計：
            オブジェクト: {
            ハンドラ(新しい名前、古い名前) {
                console.log(新しい名前、古い名前);
            },
            即時: true、
            深い:本当
            }
        } 
})
</スクリプト>