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

This article shows you how to understand vuejs data-driven, concise and easy to understand, can definitely make your eyes bright, through the detailed introduction of this article, I hope you can get something.

In vuejs, data-driven means that when the data changes, the user interface changes accordingly, developers do not need to manually modify the dom;, simply by controlling the change of data to change the DOM, so that the content of the DOM changes with the change of data.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

One: what is Vue and how to understand Vue

Vue is a framework for data-driven pages based on MVVM schema, which binds data to the view. It belongs to the technology of realizing single page application.

To sum up, the main characteristics are as follows:

Brevity

Light weight

fast

Data driven

Module friendly

Componentization

Vue uses data-driven two-way binding to make it easier for us to develop pages, and developers don't need to modify dom manually. Vue makes everything easier through two-way data binding. Its data-driven two-way binding, the bottom is through the data set defined by Object.defineProperty (), get function principle.

2. Component-based development makes the project more extensible, transplantable and code reusable.

3. The experience of a single-page application, and local components update the interface to make the user experience faster and time-saving.

A single-page application, also known as SPA, limits all activities to a Web page and loads the corresponding HTML, JavaScript, and CSS only when the Web page is initialized. Loading is complete, the page is not reloaded or redirected, just the components or modules inside interact and jump through hash, or history api, and pull data through ajax to achieve the response function, the whole application is a html, so it is called a single page!

4. Js code invisible specification, team cooperation development code is more readable.

Second: the principle of Vue data-driven (bidirectional data binding)?

What is data driven?

Data driving is the most important feature of vue.js. In vue.js, the so-called data-driven means that when the data changes, the user interface changes accordingly, and the developer does not need to modify the dom manually.

For example, if we click on a button, we need the text of the element to switch between yes and no. In jquery, we usually have a process of binding events to button, then getting the element dom object corresponding to the copy, and then changing the copy value of the dom object according to the switch.

So how does vuejs implement this data-driven approach?

Vue implements two-way data binding mainly by using data hijacking combined with publisher-subscriber mode, hijacking the setter,getter of each attribute through Object.defineProperty (), publishing messages to subscribers when data changes, and triggering corresponding monitoring callbacks. When a normal Javascript object is passed to a Vue instance as its data option, Vue iterates over its properties and converts them to getter/setter with Object.defineProperty. Users do not see the getter/setter, but internally they let Vue track dependencies, notifying them of changes when properties are accessed and modified.

Vue's data bi-directional binding uses MVVM as the entry point for data binding, integrates Observer,Compile and Watcher, monitors the data changes of its own model through Observer, parses the compilation template instructions through Compile (used to parse {{}} in vue), and finally uses watcher to build a communication bridge between observer and Compile to achieve data change-> view update; view interaction change (input)-> data model change bi-directional binding effect.

Understanding of getter/setter?

When printing out the properties in the data object under the Vue instance, each property has two corresponding get and set methods. As the name implies, get takes values and set assigns values. Normally, we use obj.prop to take values and assign values, but there is a problem with this. How do I know that the value of the object has changed? So it's set's turn. You can think of get and set as function, and when we call the object's properties, we go to get. Property () {...}, first determine whether the object has this property, and if not, add a name property and assign it a value; if there is a name property, return the name property. You can think of get as a function that takes a value, and the return value of the function is the value it gets. What feels more important is the set attribute. When you assign a value to the instance: at this point, you will enter set name (val) {.}; the formal parameter val is the value I assigned to the name property. In this function, you can do a lot of things, such as two-way binding! Because every change in this value must go through the set, it cannot be changed in any other way, which is equivalent to an omnipotent listener. The object prototype of ES5 has two new properties, _ _ defineGetter__ and _ _ defineSetter__, specifically used to bind get and set to objects. The following approach is recommended, because it is written on a prototype, so it can be inherited and reused.

Third: MVVM framework

The data driver of Vue.js is realized through the framework of MVVM. The MVVM framework mainly consists of three parts: model, view and viewmodel.

Model: refers to the data part, corresponding to the front end is equivalent to the javascript object

View: refers to the view part, and the corresponding front end is equivalent to dom

Viewmodel: the middleware that connects views to data.

Data (Model) and view (View) can not communicate directly, but need to communicate with each other through ViewModel. When the data changes, viewModel can monitor the change and notify view to make changes in a timely manner. Similarly, when an event is triggered on a page, viewMOdel can listen for the event and notify model to respond. Viewmodel is equivalent to an observer, monitoring the movements of both sides, and timely inform the other side of the corresponding operation.

The above content is how to understand vuejs data-driven. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, 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.