The topic of this issue is watch listeners .
When we are actually developing, for dynamic webpages , most of the values are constantly changing . If we need to listen to some changes in the values for corresponding processing , watch listeners are the best s Choice.
<div id="app">
<input type="text" v-model='msg'>
<h3>{
{msg}}</h3>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:''
},
watch:{
'msg':function(newV,oldV){
console.log('newV',newV);
console.log('oldV',oldV);
if(newV === '100')
{
alert('Hello!');
}
},
}
});
As usual, we wrote an input input box, an h3 tag is used to bind the value of the input box.
Then in the Vue instance, we wrote a watch attribute at the same level as data , and then wrote some behavior processing in the form of key-value pairs .
'msg' is the attribute name of the object in data, namely key.
The latter function is the value, which is the act of processing after we hear the value change.
Two parameters, newV is the latest value at present, and oldV is the old value before the change.
Then we open F12 and take a look.
The initial value is 1. After we input 10 in the input box, the console outputs the new value and the old value respectively. In this way, we have completed the value monitoring and can also make corresponding processing. For example, we input 100
because we are in the function If newV is 100, we will give a prompt box.
This is just a basic data type listening, if it is a complex data type, such as Object/Array.
Vue correspondingly also provides us with in- depth listening .
<div id="app">
<h3>{
{obj[0].name}}</h3>
<button @click='obj[0].name = "CreatorRay" '>改变</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
obj:[{
name:'Ray'}]
},
watch:{
'obj':{
deep:true,
handler(newV,oldV){
console.log('newV',newV);
console.log('oldV',oldV);
},
}
}
});
The syntax format is very similar. This time we wrote an h3 tag whose initial value is an object property obj in data, and there is also a button to change the property value bound to h3.
In the watch attribute, we see that the form is still a key-value pair, but we wrap a curly brace in the value, and in addition to the processing function, we also add a sentence of deep:true, which is a sign of deep listening.
Let's try the effect:
Before clicking the button:
After clicking the button: We
did hear the change of the object value, but we can see that the values of newV and oldV are the same. What's the matter?
In fact, Vue's official website has already mentioned this.
Note: When mutating (not replacing) an object or array, the old value will be the same as the new value because their references point to the same object/array. Vue will not keep a copy of the value before the mutation.
This problem is more in-depth. In fact, there are solutions to this situation, which can be dealt with by calculating attributes . I will issue a separate solution later.
There is actually another point of knowledge here. There is also an attribute in the in-depth listening, immediate , which can be set to return immediately .
If we don’t write this property, the deep listening event will only be triggered after we click the button. After writing this return property and assigning the value to true, even if we haven’t clicked the button, it will listen once. In some In business scenarios, this attribute is very practical.
I won’t do a demo here, you can try it yourself.
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible No., please pay attention, thank you!
