Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you data-driven about how to understand Vue. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Vue is the framework of two-way data binding, and data driver is his soul. His implementation principle is well known as get and set rewriting implemented by Object.defineProperty methods, but this is too far-fetched.

Use vue

NewVue creates the vue object, and the el attribute is the mounted dom selector. Here, id is selected as the dom,data object of app to save all the attributes of the data response. When one of the attribute values changes, view rendering is triggered, thus realizing the dynamic response of "data-> view".

In the example, the initial value of msg is hello, so the page is rendered as hello. A second later, msg becomes hi, triggering view rendering, and we see that hello becomes li.

Analyze Object.defineProperty

How do we say vue implements two-way data binding? It's Object.defineProperty, so let's just focus on Object.defineProperty.

Vue is performing defineReactive functions on each data property to achieve the purpose of data binding. You can see a few points in the code:

Each data binding will new a Dep (let's just call it a dispatcher). What is the function of the dispatcher? Rely on collection to distribute as events

In the property get, in addition to getting the value of the current property, the dep.depend () operation is also done.

What is the purpose of dep.depend? Look at the Dep part of the code, it is very simple, in fact, is to rely on collection, the Dep.target needs to collect dependencies to add to their own dispatcher

When the property set, that is, when changing the value of the property, the dep.notify () operation is performed in addition to the accident of changing the value.

What is the purpose of dep.notify? Looking at the code, it's still simple to trigger the update function with all the dependencies of your own dispatcher.

It is easy to understand that when the property get of data triggers the dep.depend of the dispatcher, and when the property set of data triggers the event notification of the dispatcher (dep.notify)

Combined with known knowledge, Vue's data binding is a side effect of the above function, so it can be concluded that:

When we change the value of a property, the dispatcher Dep informs the view layer to update

Dep.target is the dependency collected by the dispatcher Dep and triggers the update function when the attribute value changes. The update of the view layer is inevitably related to Dep.target. In other words: the data-> view's data-driven is equal to Dep.target.update ().

The above is the data driver of how to understand Vue shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.