Vue Basics Listener Detailed Explanation

data() {
    return {
        info:
            name: 'cgj'
        }
    }
}
watch:
    info:
        handler(newValue, oldValue) {
            console.log(newValue, oldValue)    
        }
        deep: true,
        immediate: true,
    }
}

'info.name': function(newValue, oldValue) {
    console.log(newValue, oldValue)
}

const app = createApp({
  data() {
    return {
      a: 1,
      b: 2,
      c: {
        d: 4
      },
      e: 5,
      f: 6
    }
  },
  watch:
    // Listen to the top-level property
    a(val, oldVal) {
      console.log(`new: ${val}, old: ${oldVal}`)
    },
    // string method name b: 'someMethod',
    // This callback will be called when the property of any monitored object changes, no matter how deeply it is nested c: {
      handler(val, oldVal) {
        console.log('c changed')
      },
      deep: true
    },
    // Listen to a single nested property
    'c.d': function (val, oldVal) {
      // do something
    },
    // This callback will be called immediately after listening starts e: {
      handler(val, oldVal) {
        console.log('e changed')
      },
      immediate: true
    },
    // You can pass an array of callbacks and they will be called one by one f: [
      'handle1',
      function handle2(val, oldVal) {
        console.log('handle2 triggered')
      },
      {
        handler: function handle3(val, oldVal) {
          console.log('handle3 triggered')
        }
        /* ... */
      }
    ]
  },
  methods: {
    someMethod() {
      console.log('b changed')
    },
    handle1() {
      console.log('handle 1 triggered')
    }
  }
})
const vm = app.mount('#app')
vm.a = 3 // => new: 3, old: 1

watch:
    "The name of the property being listened to" (newVal, oldVal){
    }
}

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>
<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  // Goal: Listen for changes in name value/*
  grammar:
    watch:
      variable name(newVal, oldVal){
        // The variable name corresponding to the value changes here automatically triggered}
    }
  */
  watch:
    // newVal: current value // oldVal: previous value name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
  }
}
</script>
<style>
</style>

watch:
    "The name of the property being listened to" (newVal, oldVal){
    }
}

<template>
  <div>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age">
  </div>
</template>
<script>
export default {
  data(){
    return {
      user: {
        name: "",
        age: 0
      }
    }
  },
  // Target: Listening object/*
  grammar:
    watch:
      variable name(newVal, oldVal){
        // The variable name corresponding to the value changes here automatically triggered},
      Variable name: {
        handler(newVal, oldVal){
        },
        deep: true, // deep listening (value changes in the object's inner layer)
        immediate: true // Listen immediately (handler is executed once when the webpage is opened)
      }
    }
  */
  watch:
    user: {
      handler(newVal, oldVal){
        //Object in userconsole.log(newVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style>
</style>