what is watch? It is an expression or method that monitors changes to a Vue instance. The callback function gets the new value and the old value as arguments, replaced by a function. Simply put: the role of watch can monitor the change of a value, and then call the method that needs to be executed because of the change. You can dynamically view the changes of the instance through watch, and you can also make further operations.
The properties of the watch can be configured:
- immediate:true/false//Executed once when the instance object is initialized
- deep:true //will monitor all properties in the object
- handler()//Some custom operations can be performed in this function
- Note that you should not use arrow functions to define watcher functions
- The watch monitoring method can only monitor one variable at a time. Simply using watch cannot monitor multiple variables, but we return an object through the computed computed property, and then use watch to monitor the method of this computed property. As long as the value changes, the watch will be triggered.
Next, look at the actual code:
<div id="app">
<input type="text" v-model="id"><br/>
<input type="text" v-model="name"><br/>
<button @click="IdAdd">clicl</button>
<p>{{result}}</p>
</div>
<script>
Vue.config.productionTip=false
var vm = new Vue({
el: '#app',
data: {
id:1001,
name:"aaa",
obj:{
hobby:"sing"
}
},
methods: {
IdAdd(){
this.obj.hobby="swim";
this.id+=100;
}
},
computed:{
result(){
this.obj.hobby="swim";
return this.id+"---"+this.name;
}
},
watch:{
/* result:{
immediate:true,
deep:true,
handler(oldValue,newValue){
console.log("changed...",oldValue,newValue);
}
}, */
"obj.hobby":{
handler(oldValue,newValue){
console.log("changed...Hobby",oldValue,newValue);
}
},
/* 'IdAdd':{
handler(){
console.log("changed...ID",oldValue,newValue);
},
} */
}
});
</script>
Another way of writing watch
vm.$watch("obj.hobby",{
immediate:true,
deep:true,
handler(oldValue,newValue){
console.log("changed...Hobby",oldValue,newValue)
}
})
Comments
Post a Comment