I. MVVM bidirectional data binding

Mvvm definition Mvvm is short for model-view-viewModel. Model-view-viewmodel.

Model refers to the data passed by the back end. View refers to the page seen. 【 Viewmodel 】 The core of the MVVM pattern, which is the bridge between the View and the model.

It has two directions:

1. It is to transform [model] into [view], that is, to convert the data transferred from the back end into the page seen. This is done by data binding. 2. It is to transform [view] into [model], that is, to convert the page seen into back-end data. This is done by DOM event listening. Both directions are implemented, which we call bi-directional data binding.

Summary: Views and models cannot communicate directly under the MVVM framework. They communicate through the ViewModel. The ViewModel usually implements an observer, and when the data changes, the ViewModel can listen for changes in the data and notify the corresponding view for automatic updates. And when the user manipulates the view, the ViewModel can also listen for changes in the view. It then notifies the data that it has changed, effectively enabling two-way binding of the data. PNG [width] [height] [title text [Alt text]] %} {% img [class names] /img/ vmM.png [width] [height] [title text [Alt text]] %}

Second, the MVC

MVC is short for Model-view-Controller. Model-view-controller. M and V refer to the same meaning as M and V in MVVM. C, for Controller, is the page business logic. The purpose of using MVC is to separate M and V code. ‘MVC is one-way communication. So the View and the Model, they have to be connected by the Controller.

The difference between MVC and MVVM is not that VM completely replaces C

The ViewModel exists to remove the business logic presented in the Controller, not to replace it. Other view operations, etc., should still be implemented in the Controller. In other words, MVVM enables reuse of business logic components. Since MVC emerged earlier, the front-end is not so mature, and a lot of business logic is also implemented in the back-end, so there is no REAL MVC pattern in the front-end. And we mention MVC again today, because of the arrival of the big front end, the emergence of the MVVM pattern framework, we need to understand how MVVM this design pattern evolved step by step.

Why the MVVM framework?

Over the last decade, we’ve put a lot of traditional server-side code into the browser, generating tens of thousands of lines of javascript code. They link various HTML and CSS files, but lack formal organization, which is why more and more developers are using javascript frameworks. Examples: Angular, React, vue. Browser compatibility issues are no longer a front end hindrance. As the front-end projects become larger and larger, the maintainability, scalability and security of the projects become the main problems. In order to solve the problem of browser compatibility, there are many class libraries, the most typical of which is jquery. However, this kind of library does not realize the division of business logic, so the maintainability and scalability are very poor. To sum up the two reasons, there is the emergence of MVVM pattern framework. Vue, for example, greatly improves development efficiency through two-way data binding.

Fourth, the Vue

Vue is a set of framework based on MVVM pattern implementation, in Vue: Model: refers to js data, such as objects, arrays and so on. View: refers to the page View viewModel: refers to the VUE instantiation object

Why is VUE an incremental framework and what is incremental?

(1) If you already have an existing server application, you can embed VUE as part of the application to bring a richer interactive experience;

(2) If you want to put more business logic on the front end, then VUE’s core library and ecosystem can also meet your various needs (Core +vuex+ VUE-route). Like other front-end frameworks, VUE allows you to split a web page into reusable components, each containing its own HTML, CSS, and JAVASCRIPT for rendering specific parts of the page.

(3) If we are building a large application, at this point we may need to split things up into separate components and files, vue has a command line tool that makes it very easy to quickly initialize a real project (Vue init webpack my-project). We can use the single-file component of VUE, which contains the respective HTML, JAVASCRIPT, and CSS or SCSS with functional domains. These three examples are step-by-step, which means that the use of VUE can be large or small, and it will be integrated into your project in a certain way. So it’s an incremental framework.

VUE’s most unique feature

Reactive, which means that when our data changes, VUE updates all of your web pages where it’s used

Five, the mainstream framework to achieve bidirectional binding (responsive) approach:

1, dirty value check: Angular.js uses dirty value detection to determine whether to update views by comparing data changes. The easiest way is to use setInterval() polling to detect data changes. Of course, Google does not do this. Basically: DOM events, such as user input text, button click, etc. (ng-click) XHR response event (Location) Timer event (The interval)Apply () organizes components in Angular as a tree. The detector, in turn, is shaped like a tree. When an asynchronous event occurs, dirty checking starts from the root component and goes down to all the children in the tree, which is a performance problem.

2. Observer-subscriber (data hijacking) : The vueObserver data listener passes an ordinary JavaScript object to the data option of a Vue instance. Vue iterates through all of the object’s properties. We use object.defineProperty () to convert all of these properties into setter and getter squares. The getter method is called when a property in data is accessed, and the setter square method is called when a property in data is changed. Compile instruction parser, which parses the instructions of each element node, replaces the template data, binds the corresponding update function, and initializes the corresponding subscription. The Watcher subscriber, acting as a bridge between Observer and Compile, can subscribe to and receive notification of each property change, executing the corresponding callback function of the directive binding. The Dep message subscriber maintains an array internally to collect subscribers (Watcher). Data changes trigger the notify function, which then calls the update method of the subscriber.

Welcome to my blog exchange learning