What are listeners in vue

• During development, we defined data in the object returned by data, which can be bound to templat through interpolation syntax and other methods.
• When the data changes, the data bound in the template will be automatically updated to display the latest data. However, this change is transformed by automatically listening for the value of data in the template
• In some cases, we want to listen for changes in some data in the code logic. At this time, we need to use the listener watch

Official definition: Vue provides a more general method to respond to data changes through the watch option. This approach is most useful when asynchronous or expensive operations need to be performed when data changes.

For an object, the key is the responsive property to listen on -- it contains data or calculated property, and the value is the corresponding callback function. The value can also be a method name or an object with additional options. The component instance will call $watch() when instantiated. See $watch for more information about the deep, immediate, and flush options

Listener usage

Option: watch
Type: {[key: string]: string | Function | Object | Array}
Configuration options for listener watch:
By default, watch is only listening for data reference changes and will not respond to changes in data internal properties:
At this time, we can use an option deep for deeper listening; Another attribute is that you want to execute it immediately at the beginning: at this time, we use the immediate option; At this time, the listening function will execute only once, regardless of whether the following data changes;

Content of data:

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

The other is not mentioned in the Vue3 document, but the Vue2 document mentions the properties of the listening object:

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

Another way is to use the API of $watch:
For $watch, you can view the official API (in a few ways): instance method | Vue.js

const app = createApp({
  data() {
    return {
      a: 1,
      b: 2,
      c: {
        d: 4
      },
      e: 5,
      f: 6
    }
  },
  watch: {
    // Listen for top-level properties
    a(val, oldVal) {
      console.log(`new: ${val}, old: ${oldVal}`)
    },
    // String method name
    b: 'someMethod',
    // The callback is called when the property of any object being listened on changes, no matter how deep it is nested
    c: {
      handler(val, oldVal) {
        console.log('c changed')
      },
      deep: true
    },
    // Listen for a single nested property
    'c.d': function (val, oldVal) {
      // do something
    },
    // The callback will be called immediately after listening starts
    e: {
      handler(val, oldVal) {
        console.log('e changed')
      },
      immediate: true
    },
    // You can pass in the callback array, which 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

vue listener watch

Target: you can listen for data/computed attribute value changes
Syntax:

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

Example code:

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  // Target: listen for change of name value
  /*
  Syntax:
    watch: {
      Variable name (newVal, oldVal){
        // The change of the corresponding value of the variable name is automatically triggered here
      }
    }
  */
  watch: {
    // newVal: current latest value
    // oldVal: last moment value
    name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
  }
}
</script>

<style>

</style>

Summary: if you want to listen for a property change, you can use the listening property watch

vue listener - deep listening and immediate execution

Target: you can listen for data/computed attribute value changes
Syntax:

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

Example code:

<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
  /*
  Syntax:
    watch: {
      Variable name (newVal, oldVal){
        // The change of the corresponding value of the variable name is automatically triggered here
      },
      Variable name:{
        handler(newVal, oldVal){

        },
        deep: true, // Deep listening (the value of the layer inside the object changes)
        immediate: true // Listen now (the web page opens and the handler executes once)
      }
    }
  */
  watch: {
    user: {
      handler(newVal, oldVal){
        // Objects in user
        console.log(newVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style>

</style>

Summary: immediate listen, deep listen, handler fixed method trigger