Listening attribute watch:
1. When the monitored property changes, the callback function is automatically called to perform related operations.
2. The attribute of monitoring must exist in order to monitor.
3. Two ways of writing monitoring:
(1): Pass in the watch configuration in the vue instance.
(2): Use .$watch to monitor through the vue instance object vm.
Specific examples: (Notes explain)
<body>
<div class="a" id="a">
省：<input type="text" v-model.lazy="province"> <br><br>
市：<input type="text" v-model.lazy="city"> <br><br>
位置：<span>{
{ area }}</span> <br><br>
修改位置：<input type="text" v-model.lazy="area"> <br><br>
<hr>
随行人数: <input type="text" v-model.lazy="number.a"> <br><br>
<hr>
前往地区：<input type="text" v-model.lazy="place">
</div>
<script>
var vm = new Vue({
el: '#a',
data: {
province : '吉林',
city : '长春',
number: {
a:5,
b:0,
},
place:'快乐星球',
},
//计算属性
computed:{
area:{
get(){
console.log('get方法被调用')
return this.province + '-' + this.city
},
set(area){
console.log('set方法被调用')
const arr = area.split('-')
this.province = arr[0]
this.city = arr[1]
}
}},
//监视属性
watch:{
//监听计算属性/一级属性
area:{
handler(newValue,oldValue){
console.log('area被修改',newValue,oldValue)
}
},
//监听多级属性
number:{
immediate:true, //初始化调用handler一次
deep:true, //深度监视
handler(){
console.log('number被修改')
}
},
//监听简写 简写方法没有immediate，deep等配置项
city(newValue,oldValue){
console.log('city被修改',newValue,oldValue)
},
},
}
);
//不在vue实例下的监视方法
vm.$watch('province',{
handler(newValue,oldValue){
console.log('province被修改',newValue,oldValue)
}
});
//不在vue实例下的简写方法，简写方法没有immediate，deep等配置项
vm.$watch('place',function(newValue,oldValue){
console.log('place被修改',newValue,oldValue)
})
</script>
</body>The initial state of the page:
The location is obtained by connecting the province and city with '-' through the calculated attribute, so the get function is called initially.
Click to view a simple example of a computed property
Other attributes are realized by {{}} interpolation method
The number monitoring is triggered because the immediate:true configuration will call the handler method once at the beginning , and the number is a multi-level structure. In the vm instance, only the number object can be monitored, and what we are monitoring is the a attribute under the number object, so we need For deep monitoring , the deep:true configuration is added to the configuration item to achieve multi-level monitoring, otherwise the change of the a attribute cannot be monitored.
Here we change the city in the location information in the above picture from Changchun to Baicheng, so the set method in the calculated attribute is called to change the city information, so the get method is also called to change the city display information, and the city monitoring is triggered at this time . The area attribute listener is triggered because the location information is changed .
In the same way, modify the information of other input boxes and trigger the corresponding monitoring event at the same time, and the monitoring event will be displayed at the corresponding code position.
Engage in technical tips: v-model uses the .lazy modifier
.lazy modifier: After adding the .lazy modifier , changing the content in the input box does not immediately change the property data of the two-way binding, but changes the data of the bound property when the input box loses focus.
As a small example, we bind the v-model to the province, add the .lazy modifier to the v-model of the city, and observe the difference.
We modified the province and city information and added data 1, 2, and 3 three times (the cursor does not leave the input box), and found that the listening event without the modifier was triggered three times, and the modified one was triggered once , while the one with the modifier was only triggered. A listening event is triggered only after our final modification is completed.
