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

This article shares with you the content of an example analysis of vue's data-driven principles. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The data-driven principle of vue is to hijack the setter and getter of various attributes through "Object.defineProperty ()" by combining data hijacking with publisher and subscriber mode, and publish messages to subscribers when the data changes, triggering the corresponding monitoring callback.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

Vue data-driven principle

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 {undefined {}} 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. Attribute () {… }, 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 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.

Thank you for reading! This is the end of this article on "sample Analysis of vue data-driven principles". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.