What is the data-driven principle of vue

The data-driven principle of vue is: using data hijacking combined with the publisher and subscriber model, using "Object.defineProperty()" to hijack the setters and getters of each property, and publish messages to subscribers when the data changes. Trigger the corresponding listening callback.

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What is the data-driven principle of vue

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 kind of data drive?

Vue implements two-way data binding mainly by using data hijacking combined with the publisher-subscriber model, and hijacking the setters and getters of each property through Object.defineProperty(). When data changes, messages are published to subscribers and the corresponding listening callbacks are triggered.

When a normal Javascript object is passed to a Vue instance as its data option, Vue will iterate through its properties and use Object.defineProperty to convert them into getters/setters. 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, integrates Observer, Compile and Watcher, 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 {undefined{}}), 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 two-way 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 suggests, get is the value, and set For assignment, under normal circumstances, we use obj.prop to obtain 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 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 property. 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 of things , 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.

[Related recommendations: "vue.js Tutorial"]

The above is the detailed content of What is the data-driven principle of vue. For more information, please follow other related articles on the PHP Chinese website!