Detailed explanation of the basic usage of VUE watch listener

<div id="app">
    <input type="text" v-model="firstName" />
</div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
var vm = new Vue({
    el:"#app",
    data:{
        firstName:"张"
    },
    watch:{         
        firstName：(newVal,oldVal){
//firstName is the name of the data you want to monitor. Use the function name you want to monitor, such as monitoring the firstName of v-model                    
//newVal: indicates the value after the change, that is, the first parameter, do not swap positions //oldVal: indicates the value before the change,
            console.log({newVal,oldVal}); // {newVal: "陈", oldVal: "张"}
        }
        //Write a monitoring function directly, and execute the function every time the cityName value changes.
        //You can also add the method name in string format directly after the monitored data: firstName: 'nameChange'
    },
    methods:{
        nameChange(){
         }
    }
})
 vm.firstName = "陈"; //Change the monitored value</script>

watch:
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    { immediate: true }
  }
}

<div id="app">
    <div>
        <p>Number: {{ myNumber }}</p>
        <p>Number: <input type="text" v-model.number="myNumber"></p>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        myNumber: 'Dawei'
    },
    watch:
        myNumber: {
            handler(newVal, oldVal) {
                console.log('newVal', newVal);
                console.log('oldVal', oldVal);
            },
            //When immediate is true, the callback function is triggered immediately; if it is false, the callback will not be executed immediately, just like the example above.
            immediate: true
          }
      }
 })
</script>
//The handler method is the specific method you need to execute in your watch

 <div id="root">
    <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>
 <script>
    new Vue({
        el: '#root',
        data: {
            obj: {
                 a: 123
            }
        },
        watch:
            obj: {
            handler(newName, oldName) {
                console.log(newName, oldName);
            },
            immediate: true,
            deep:true
            }
        } 
})
</script>