current position:Home>Vue - what is a watch listener?

Vue - what is a watch listener?

2021-08-26 06:44:34 HZM_ Endless

On the official website , about watch There is a detailed introduction , You can pay attention to the official documents , Here's my personal view of watch Summary of listeners


What is? watch The listener ?

watch The listener : It's essentially a function , Monitoring data changes , Do specific operations for data changes .( The data name can be used as the method name )

( notes : All listeners , Should be defined in watch Under the node )

const vm = new Vue({
    el: '#app',
    data: { username: '' },
    watch: {
        //   monitor  username  Change in value 
        // newVal  yes " New value after change ", oldVal  yes " Old value before change "
        username(newVal. oldVal) {
            console.log(newVal. oldVal)
        }
    }
})

immediate Options

By default , The component does not call after the initial load watch The listener . If you want to watch The listener Immediately called , You need to use immediate Options .

watch: { 
username: { 
// handler  It's fixed writing , Said when  username  When the value of ,
//  Automatically call  handler  Processing function  
handler: async function (newVal) {
if (newVal === '') return 
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res) 
}, 
//  Indicates that after the page is rendered for the first time , Immediately trigger the current  watch  The listener  
    //immediate  The default value of the option is  false
    //immediate  The role of is :  Controls whether the listener automatically triggers once !
immediate: true 
} 
}

deep Options

If watch Listen to an object , If the attribute value in the object changes , Can't be monitored
. You need to use deep Options

 const vm = new Vue({
     el: '#app',
     data: {
         info: { username: 'admin' }
     },
     watch: {
         info: {
             handler(newVal){
           console.log(newVal.username)
             },
             deep: true
         }
     }
 })
-  Listen for changes in a single attribute of an object  ,  The method is as follows  : 

  ```
  const vm = new Vue({
      el: '#app',
      data: {
          info: { username: 'admin'}
      },
      // All listeners , Should be defined to  watch  Under the node 
      watch: {
     // If you want to change the sub attributes of the listener object , You must wrap a single quotation mark 
          'info.username':{
              handler(newVal){
                  console.log(newVal)
              }
          }
      }
  })
  ```

Format of listener

​ 1.> Method format listener

  • shortcoming 1. : It cannot be triggered automatically when you first enter the page !
  • shortcoming 2. : If listening to an object , If the property changes , The listener... Will not be triggered !

​ 2.> Object format listener

  • benefits 1. : Can pass immediate Options , Let the listener automatically trigger !
  • benefits 2. : Can pass deep Options , Let the listener listen deeply for changes in each property in the object !

copyright notice
author[HZM_ Endless],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826064431418q.html

Random recommended