When listening with $watch, when the monitored data is an object, you should pay attention to a few points:
When listening for a certain attribute in an object in a component, do not listen to the object, but directly listen to the attributes in the object (deep listening). Only directly listen to the attributes in this object, and only update the attributes in the object can also directly listen to the changes in this array.
like
data(){
return {
msgs ： {
list:[1,2,3]
}
}
},
watch:{
msg(newVal,oldVal){
(newVal);//(1)
}，
"":function(newVal,oldVal){
(newVal)//(2)
}
}，
mounted(){
this.$set(,"list",[1,2,3,4]);//(1) Will not print, (2) Will printthis.$set(this,"msg",{list:[1,2,3,4]}//(1) Will print, (2) Will print}
The data driver is implemented based on the function of (). The data objects in vue are represented by trees. Each leaf node of the tree will use () to define the get/set method, and when the set method is executed, the watch method will be executed to realize data monitoring.
We can listen to any leaf node of the tree. When the leaf node data changes, the monitoring method in this leaf node will be executed. At the same time, the monitoring method of the lower level, lower level or even lower level leaf nodes will also be executed (assuming that the corresponding leaf node data will also change).
as follows
data(){
return {
msgs:{
list:[1,2,3],
msg:'1'
}
}
},
watch:{
msgs(newVal,oldVal){
(newVal);//(1)
}，
"":function(newVal,oldVal){
(newVal)//(2)
}
"":function(newVal,oldVal){
(newVal)//(3)
}
}，
mounted(){
//The following examples are experimented one by one, and do not run them together, as they will cause errors in the results. Of course, you can also verify how to put it together by yourself. You can also verify that the following results are correct.
this.$set(,"list",[1,2,3,4]);//(1)(3) will not print, (2) will print//Analysis: This is to update the data of the list leaf node in the msgs tree, which will trigger the "" listening method, so (2) is printedthis.$set(this,"msgs",{list:[1,2,3,5]});//(1)(2)(3) will print//Analysis: This is to update the data of the root node in msgs, which will trigger the monitoring method of "msgs". Because there are child nodes under the root node, it will continue to traverse downwards and find that the data of the list node also changes accordingly. The monitoring method of "" is triggered by [1,2,3]=>[1,2,3,4]. Similarly, the data of the msg node from "1"=>"undefined" will also trigger the monitoring method of "", so (1)(2)(3) will be printed.this.$set(this,"msgs",{list:[1,2,3,4],msg:"1"});//(1)(2) Will print, (3) Will not print//Analysis: The difference from the above is that the content of the msg node has not changed. It has always been "1", so the monitoring method of "" will not be triggered, so (3) does not print, (1) (2) will print}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.