Vuejs implementing data-driven view principles

What is data-driven

Data driven is the biggest feature of Vuejs. In Vuejs, the so-called data-driven is when the data changes, the user interface changes, developers do not need to manually modify the DOM.

For example, if we click on a button, the text of the element needs to be switched to Yes and No. In the era of jquery and slash-and-burn, we are generally a process for modifying the page, we bind the event to the button, then get the copy of the element Dom object, and then modify the DOM object's text counterfeited according to the toggle.

And for Vuejs to implement this function of the process, only need to specify the event on the button element, while declaring the corresponding copy of the property, click on the event to change the value of the property, the corresponding element of the text can be automatically switched, we do not need to manually manipulate the DOM as before.

In short, Vuejs helps us encapsulate the mapping of data and DOM object operations, we only need to care about the logical processing of data, the change of data can be natural to inform the page to re-render the page.

This does give us the benefits, we do not need to operate the DOM frequently in the code, in the actual project, we have a lot of code after the data modification, manual operation to re-render the page elements, when the page more and more complex, page code organization will be more difficult to maintain. At the same time, JS on the DOM of the frequent operation, will make the page code error probability is high, the Page view presentation Fusion in the JS code, for the page view display upgrade is not friendly.

So how does Vuejs achieve this data-driven?

MVVM Framework

Vuejs data-driven is implemented through the framework of MVVM. The MVVM framework consists of 3 main parts: Model, view, and ViewModel.

Model: Refers to the data part, corresponding to the front end is the JavaScript object

View: Refers to the Views section, the corresponding front end is the DOM

Viewmodel: The middleware that connects views and data

Data (Model) and Views (view) are not directly communicated, but need to be viewmodel to communicate with each other. When the data changes, ViewModel can listen to this change, and timely notify the view to make changes. Similarly, when the page has an event trigger, ViewModel can also monitor the event and notify the model to respond. ViewModel is the equivalent of an observer, monitoring the action of both sides, and timely notify each other to do the appropriate operation.

Vuejs Data-driven implementation

For the data-driven implementation, we can simply through the timer to achieve this function, timer monitoring object data, timer monitoring data changes, determine whether to update the interface

    A = 1;    function Renderdom () {        document.getElementById (' app '). InnerHTML = ' data is ' + A;    }        Function Watcher (method) {        var b = A;        Method.apply ();         Return SetInterval (function () {           if (b! = a) {                method.apply ();                b = A;}}        , +)    }    Watcher (Renderdom);

Of course, Vuejs can't be such a simple way of violence, Vuejs is driven by data that is implemented by an observer.

First, Vuejs in the process of instantiation, it iterates through all of its properties and uses Object.defineproperty to convert all of these properties to getter/setter by iterating through the data options in the instantiated objects option.

At the same time, each instance object has a Watcher instance object, he will use getter to access the properties of data in the process of template compiling, watcher will use the Data property as a dependency, thus establishing the connection between the view and the data. When the data dependency of the rendered view is changed (that is, when the setter of the data is called), the watcher will compare the two values before and after the change, and then determine whether the view is notified to be re-rendered.

This enables the so-called data to be driven by the view.

About the implementation of the code, you can refer to this article to implement the basic idea of vue2.0 response

Vuejs implementing data-driven view principles