It is mainly an input box. At this time, we need to create it to modify the data in real time for the setVal method. If we are binding an object here, then we need to traverse to the bottom to modify the data, so take the length of the array and make a judgment, that is, when traversing to the end, I will assign it to him. In this way, two-way data binding is realized,
The summary of two-way data binding is mainly v-model. When the data affects the view, you can directly use the watcher's callback function to update the view. When the view affects the data, define a setVal method, pass the latest value and keys in, and modify it inside vm.$data to modify the data, so as to achieve the effect of view influencing the data.
To realize the proxy, you don’t need to write this.$data.name every time but write this.name directly
At the beginning , the data here refers to this.$data, so we must use this. $data to get the modification to modify the data. At this time, an external agent can be implemented to obtain the modified data through this point, as shown in the figure.
At this time we have two ways to modify the data, one is this.$data.name to go to the inner layer, the other is this.name to go directly to the agent. It is equivalent to adding all the attribute methods to the this object, that is, the Vue object and performing a monitoring. There is no such attribute on this before the agent . After the proxy, and our data also has it, so we can use both.
Agent summary, that is, on the basis of this.$data, in the outer layer of the Vue class, the monitoring of each property in the data is also added, object.defineproperty(this,key,{get(){},set() {}}). In this way, you can get the data and modify the data through this.
All summary
The MVVM mode of Vue is mainly in the new Vue. There are three classes, a Complie, an Observer, and a Watcher. These three classes are related through the Dep class. The first is Observer, which implements data monitoring, mainly to pass data in, and monitor the data through the set method and get method of each property of object.defineproperty. There is also the creation of a Dep class, which adds all subscribers together through the Dep class, and modifies the subscriber data through Dep.notify().
Next is the Complie class, which is responsible for rendering the initial data and subsequent data modification and updating the view. First, create a document fragment object and put all the nodes in it, and then update the data for each node one by one through judgment, and then Just mount the document fragment object to the app. When data is updated, new Watcher will be created, subscribers will be created, and the value in data will be obtained at the beginning of subscriber creation, so the get function will be called. In the get function, subscribers will be added to dep one by one. In this way, the function of joining subscribers is realized. Then when the data is updated, the set function is called. The set function calls dep.notify() to modify the view through the wathcer. The watcher calls its own update method to obtain the latest value for judgment and call the callback function when the wathcer was created at the beginning. Realize view update through Complie class.
Then we need to realize two-way data binding, mainly the model that is the input box, create the setVal method, bind the input through the event, obtain the event object e.target.value to obtain the value input on the view, and update through setVal to achieve the updated data Features.
The last is the proxy. At the beginning, our data is strong in this.$data, so we can define a method in the Vue class, and then listen to the data on the Vue class. It is also through object.defineproperty that the first A parameter points to the Vue class, traverses each attribute, and listens to it, so that there are these data and the get, set methods of these data on the Vue class, and the data can be obtained or modified through this.name.
