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 !
