The inside call to the methods method inside the watch reported an error
Restore error example
example
<script>
export default{
data(){
return {
data: 1,
}
},
watch: {
data: (newV, oldV) => {
() // Undefined will appear here }
},
methods: {
printf(){
("111111")
}
}
}
</script>
Cause of error
One thing to note in the watch listener of vue is that is the internal monitoring method of watch. You must not use arrow expressions. The correct way to write it should be
watch: {
data: function(newV, oldV){
}
}About how to use watchvue official link
Understand the call timing of methods, computed, and watch
Recently, when I was studying Vue framework, I didn’t understand methods and computed very much. After reading several blogs written by others, I felt that the description was also very vague, so when I understood the main differences between them, I wrote an article to record them.
Functions defined in
The call time is: when the page refers to the properties of the vue data keyword and these properties change, the functions defined in methods will be executed, and regardless of whether the functions defined in methods rely on the properties in data keyword, the functions defined in methods will be executed. The functions defined in methods can be executed every time they are called like ordinary functions.
Functions defined in
The call time of the function defined in computed is: when the page refers to the properties of the vue data keyword and these properties change, if the functions defined in computed also rely on these changed properties, the functions defined in computed will be executed.
That is, the condition that the function defined in computed is called back by the Vue framework is
- 1. The properties of vue are dependent on the function
- 2. These properties have changed
- 3. These attributes are referenced by the page
Only when these three conditions are satisfied at the same time will the callback of a function defined in computed be triggered. Moreover, the calling syntax of functions defined by methods is also different. Functions defined in computed cannot have brackets after calling, similar to calls of properties.
Not every time the function defined in computed is actively called, it will be executed. Even if the function defined in computed is actively called, whether it will be executed is related to whether the internal dependency attributes have changed.
Methods defined in
It is used to trigger a callback when a certain attribute changes. When defining a method in watch, the key of the method must be the attributes already defined in vue.
new Vue({
el: "#app",
data: {
num: 1,
num2: 2,
value3: 88
},
methods: {
getNum:function(){ //It will be executed every time the page is updated alert("methods");
return "Num now:";
}
},
computed: {
getNum2:function(){ //The first execution is performed, and later when the dependency property changes, it will be executed later. alert("computed");
return "num2："+ this.num2;
}
},
watch: {
value3: function(value){ //value3 is a property that has been defined in data. Value is the value when the property changes alert("Now value:"+ value);
}
}
})<div >
<p>{{num}}</p>
<p>{{getNum()}}</p>
<button v-on:click="num++">Num++</button>
<button v-on:click="num--">Num--</button>
<button v-on:click="num2++">Num2++</button>
<button v-on:click="value3++">value3++</button>
</div>The above understanding comes from the test and summary of the code operation status, and there may be any inconsideration. I hope readers will forgive me.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.