How to understand vuejs data driver

In vuejs, data-driven means that when the data changes, the user interface changes accordingly, and developers do not need to manually modify the DOM; simply speaking, it changes the DOM by controlling changes in data. , allowing the content of the view (DOM) to change as the data changes.

The operating environment of this tutorial: Windows 7 system, vue version 2.9.6, DELL G3 computer.

1: What is Vue, how to understand Vue

Vue is a framework based on the MVVM mode data-driven page, which binds data on view. It is a technology for implementing single-page applications.

Several major features summarized:

• Simple

• Lightweight

• Fast

• Data-driven

• Module-friendly

• Component-based

Vue relies on data-driven two-way binding to make it easier for us to develop pages. Developers do not need to manually modify the DOM. Vue makes everything easier with two-way data binding. Its data-driven two-way binding is implemented through the data set and get function principles defined by Object.defineProperty().

2. Component-based development makes the project more scalable and portable, and the code is more reusable.

3. Single-page application experience, local components update the interface to make the user experience faster and save time.

Single-page application, also known as SPA, limits all activities to a Web page and only loads the corresponding HTML, JavaScript and CSS when the Web page is initialized. After the loading is completed, the page no longer reloads or jumps. Only the components or modules inside interact and jump through hash or history api, and pull data through ajax to implement the response function. The entire application is just one html, so it is called Single Page!

4. The js code is invisibly standardized, and the code developed through teamwork is more readable.

2: What is the principle of Vue data-driven (two-way data binding)?

What is data-driven

Data-driven is the biggest feature of vue.js. In vue.js, the so-called data-driven means that when the data changes, the user interface changes accordingly, and developers do not need to manually modify the DOM.

For example, if we click a button, the text of the element needs to be switched between yes and no. In jquery, when modifying the page, we generally follow this process. We bind events to the button, then obtain the element dom object corresponding to the copy, and then modify the copy value of the dom object according to the switch.

So how does vuejs achieve this data drive?

Vue implements two-way data binding mainly by using data hijacking combined with the publisher-subscriber model, and using Object.defineProperty() to hijack the setters and getters of each property when the data changes. Publish messages to subscribers and trigger corresponding listening callbacks. When you pass a plain Javascript object to a Vue instance as its data option, Vue will iterate through its properties and convert them into getters/setters using Object.defineProperty. The getters/setters are not visible to the user, but internally they allow Vue to track dependencies and notify changes when properties are accessed and modified.

Vue's two-way data binding uses MVVM as the entrance to data binding, integrating Observer, Compile and Watcher. It uses Observer to monitor the data changes of its own model, and uses Compile to parse and compile template instructions (vue is used to parse {{}}), and finally uses watcher to build a communication bridge between observer and Compile to achieve data changes -> view updates; view interactive changes (input) -> data model changes in both directions Binding effect.

Understanding of getter/setter?

When printing out the attributes in the data object under the Vue instance, each of its attributes has two corresponding get and set methods. As the name implies, get is for value acquisition and set is for assignment. Under normal circumstances, we take Value and assignment are done using obj.prop, but there is a problem with this. How do I know that the value of the object has changed? So it’s the set’s turn to appear. You can understand get and set as functions. When we call the properties of the object, we will enter get.property(){...} and first determine whether the object has this property. If not, then add a name attribute and assign a value to it; if there is a name attribute, return the name attribute. 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 I feel is more important is the set attribute. When assigning a value to an instance: At this time, it will enter set name(val){...}; the formal parameter val is the value I assigned to the name attribute. In this function, you can do a lot Things have changed, such as two-way binding! Because every change of this value must go through set, it cannot be changed by other methods, which is equivalent to a universal listener. The ES5 object prototype has two new attributes __defineGetter__ and __defineSetter__, which are specially used to bind get and set to objects. It is recommended to use the following method, because it is written on the prototype, so it can be inherited and reused.

3: MVVM framework

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

• Model: refers to the data part, which corresponds to the front-end equivalent of the javascript object

• View: refers to the view part, which corresponds to the front-end equivalent In dom

• Viewmodel: it is the middleware communication that connects the view and the data

Data (Model) and view (View) cannot communicate directly , but the communication between the two parties needs to be realized through ViewModel. When the data changes, the viewModel can monitor the change and notify the view to make modifications in a timely manner. Similarly, when an event is triggered on the page, viewMOdel can also listen to the event and notify the model to respond. Viewmodel is equivalent to an observer, monitoring the actions of both parties and notifying the other party in time to perform corresponding operations.

Related recommendations: "vue.js Tutorial"

The above is the detailed content of How to understand vuejs data driver. For more information, please follow other related articles on the PHP Chinese website!