Preface
I mentioned calculated properties earlier. Although calculated properties are more appropriate in most cases, sometimes a custom listener is needed. This is why Vue provides a more general way to respond to data changes through the watch option. This method is most useful when you need to perform asynchronous or expensive operations when the data changes .
Basic usage
In Vue, use watch to respond to data changes, that is, when the data in data changes, the monitoring function will be triggered:
body>
<div id="app">
<input type="text" v-model="message" placeholder="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:""
},
watch:{
message(newVal,oldVal){
console.log("江山如此多娇，引无数英雄竞折腰。")
console.log(newVal,oldVal)
}
}
})
</script>
</body>
An input text box is defined here and used v-modelfor binding. When the data changes, the changes can be seen in the console. It is worth noting that the callback function has two parameters, one is the newly changed value, and the other is the previous value. It is worth noting that the function name of the monitoring function must be an attribute defined in data and to be monitored, such as the message above. Of course, in addition to monitoring the data in the data, you can also monitor the routing. Routing will be introduced later, mainly listening '$route.path', which is not available for methods and listening properties.
Execute immediately
Through basic usage, we can see that watch is triggered by response data, so I want to trigger immediately after the page is refreshed. What if I don't trigger by changing the data? The immediatesum is used here handler, and the specific examples are as follows:
<body>
<div id="app">
<input type="text" v-model="context" placeholder="context"> <br>
<input type="text" v-model="message" placeholder="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
context:"",
message:""
},
watch:{
message(newVal,oldVal){
console.log("江山如此多娇，引无数英雄竞折腰。")
},
context:{
handler(newVal,oldVal){
console.log("须晴日，看红装素裹，分外妖娆。")
},
immediate: true
}
}
})
</script>
</body>
For the above contextobject, set it here immediate=true, and then use handlerthe logic to implement the method body. The function we wrote before is actually writing this handler method; immediate indicates whether the handler is executed when the watch is first bound, and the value is true. When declared in watch, the handler method will be executed immediately. If the value is false, the handler will be executed only when the data changes, just like the normal use of watch.
In-depth monitoring
When you need to monitor the changes of complex data types (objects), the ordinary watch method cannot monitor the changes of the internal properties of the object. Only the data in the data can monitor the changes. At this time, the deep attribute is required to deeply monitor the object:
<body>
<div id="app">
<input type="text" v-model="context" placeholder="context"> <br>
<input type="text" v-model="message" placeholder="message"> <br>
<input type="number" v-model="man.age" placeholder="man.age">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
context:"",
message:"",
man:{
name:"吴邪",
age:"25"
}
},
watch:{
message(newVal,oldVal){
console.log("江山如此多娇，引无数英雄竞折腰。")
},
context:{
handler(newVal,oldVal){
console.log("须晴日，看红装素裹，分外妖娆。")
},
immediate: true,
deep: true,
},
man:{
handler(newVal,oldVal){
console.log("我是吴三省")
},
immediate: true,
deep:true
}
}
})
</script>
</body>
Set deep: true to monitor man.agethe changes. At this time, this listener will be added to all attributes of man. When there are many object attributes, the handler will be executed for every attribute value change. If you only need to monitor an attribute value in the object, you can monitor the object attribute in the form of a string, such as monitoring man.namethis attribute
watch:{
'man.name':{
handler(newVal,oldVal){
console.log("小邪，我是吴三省")
},
immediate: true,
deep:true
}
}