Vue data bidirectional binding understanding (with MVVM understanding)

A meaning,

Vue is a data hijacking combined with a publish/subscribe model throughObject.defineProperty()To hijack attributessetter.getterTo publish messages to subscribers when data changes, triggering corresponding listening callbacks.

So, the question is, what are getters and setters? The object.defineProperty () method does?

Objects have two kinds of properties :(1) data properties, which we often use; (2) accessor properties, also known as accessor properties. (3) accessor properties are a set of functions that get and set values.

Print the following code:

const obj = { a:1,b:2 }
console.log(obj)
Copy the code

The results are as follows:

The data properties are A and B, and the accessor properties correspond to the set and GET keywords.

The corresponding method to get, called a getter, is responsible for getting the value, and it takes no arguments. The setters correspond to methods that set values, and all returns are invalid in the function body.

DefineProperty defines new attributes or modifies existing attributes

Syntax: Object.defineProperty(obj, prop, Descriptor)

Parameter: obj: required. Target object;

Prop: Required. The name of the property to be defined or modified;

Descriptor: required. Properties owned by the target property;

Insert an understanding of MVVM

The MVVM:

M: A Model is simply a data object related to the business logic. It is usually mapped from a database. We can say it is a Model corresponding to the database.

V: View is also very simple, it is the user interface presented.

VM: The viewModel is responsible for synchronizing the Model data to the View and for synchronizing the View changes to the Model.

Communication between the parts is two-way. There is no connection between the View and Model. It is passed through the ViewModel.

Interview question: What is the MVVM framework?

The MVVM framework is a Model-view-ViewModel framework, where the ViewModel connects the Model Model to the View View.

Vue. Js is data-driven. Vue. Js instantiates objects to bind DOM and data. ViewModel is the heart of vue.js and is an instance of vue.js. Vue.js instantiates an HTML element, which can be a body or an element referred to by a CSS selector. DOM Listeners and Data Bindings are the key to realize bidirectional Bindings. DOM Listeners listen to ALL of the DOM elements in the View layer of the page, and the Data in the Model layer changes as changes occur. Data Bindings listens to Model layer Data, and when Data changes, View layer DOM elements change.

To continue with bidirectional binding:

The observer in the figure above, whose job is to implement data hijacking with Object.defineProperty() for a loop of properties defined in data in each VUE to take advantage of the setters and getters in it, and then notify the subscriber, who will trigger its update method, Update the view.

Compile, shown above, parses template instructions and replaces variables in templates with data.

Compile works when:

1. When initializing the page

** Bind the update function to the node corresponding to each instruction, and add the subscriber of listening data;

Dep is responsible for maintaining dependencies, while the subscribers come from Compile. When data changes, the function is updated via Watcher binding. Watcher adds subscribers to the Dep. Watcher calls its update() method and triggers the callback bound in Compile to update the view.

Reference bosses links: www.cnblogs.com/webcabana/p…