Modify the properties of obj data in data
//Method 1var obj = ; = 'long'; = obj;
//Method 2(, "password", "num"); //part1, the obj object to be modified;//part2, attributes to be added or modified;//part3,Modify the value；
Modify data to implement data responsiveness
Vue is used to re-render the page when the data changes. Therefore, the data objects passed in are monitored during initialization.
How to ensure that I can monitor your changes?
The listening operation is: to declare a variable internally for each data of the data object, store the initial value passed in, and then start the proxy mode. The subsequent reading and modification of this data are actually getters and setters for this internal variable. Therefore, all modifications will pass through the setter, so you only need to trigger the monitoring function when the setter is set and render the page.
When you pass a normal JavaScript object into a Vue instance as a data option, Vue will iterate over all properties of this object and use to convert all of these properties into getter/setter.
Each component instance corresponds to a watcher instance, which records the "contacted" data property as a dependency during component rendering. Then, when the setter of the dependency is fired, the watcher is notified, causing its associated components to re-render.
Then the returned to the outside is actually a tampered and proxyed data object.
Can Vue still listen if the initial value is not given to this variable?
There is a problem that novices are prone to commit to: when they first pass into the data object, they forget to pass this variable or cannot pass this variable.
Due to JavaScript limitations, Vue cannot detect changes in arrays and objects.
If this variable is used later, the page will not change when the variable is updated later, because vue does not listen to this object at all.
Solution:
(1) This variable is passed in from the beginning;
(2) For objects: use or vm.$ set to listen for variables before use;
(3) For arrays, except for the or and vm.$set methods of the object. You Yuxi actually encapsulated the following methods of the array, and set monitoring was performed when using these methods.
push()pop()shift()unshift()splice()sort()reverse()
There is a magical test question:
<div >
<span class=span-a>
{{}}
</span>
<span class=span-b>
{{}}
</span>
</div>var app = new Vue({
el: '#app',
data: {
obj: {
a: 'a',
}
},
})
= 'a2'
= 'b'What strings are displayed in span-a and span-b in the end? The answer is: a2 and b
The reason is that when the view displays a2 of span-a, it updates span-b
View updates are actually asynchronous.
1. When we make a change from ‘a1’ to ‘a2’, Vue will listen to this change, but Vue cannot update the view immediately, because Vue uses this method to listen to the change. After listening to the change, a view will be created to update the task into the task queue. (The document is written)
2. So before the view is updated, you must run the remaining code first, that is, b = ‘b’ will be run.
3. When the view is updated, since Vue will do diff (the document is written), Vue will find that a and b have changed, and will naturally update span-a and span-b.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.