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 as 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, the data passed by the back end into the page to be seen. The way to do this is: data binding. 2. It is to transform [view] into [model], that is, to convert the page seen into back-end data. The way to do this is: DOM event listening. Both directions are implemented, which we call data binding in both directions.

Summary: Views and models cannot communicate directly under the MVVM framework. They communicate via a ViewModel, which typically implements an observer,

When the data changes, the ViewModel can listen for changes in the data and notify the corresponding view of automatic updates. When the user manipulates the view, the ViewModel can also listen for changes in the view and notify the data of changes. This actually implements data binding in both directions. And views and ViewModels in MVVM can communicate with each other

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?

(We use the library, but the framework uses us, and must follow its rules.)

To sum up, a kind of two points, easy to maintain and use, to achieve business divided

Over the last decade or so, we’ve put a lot of traditional server-side code into the browser, resulting in tens of thousands of lines of javascript code that link various HTML and CSS files, but lack formal organization. This 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 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 in front of the implementation, 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 or not a view is updated. The simplest way to update a view is to use setInterval() polling to detect changes in data. Of course, Google doesn’t do that. Angular only checks for incoming values when specified events are triggered: DOM events, such as user input to text, button clicking, etc. (ng-click) XHR response event ($HTTP) Browser Location change event ($Location) Timer event ($timeout, $interval) performs $digest() or $apply(). Components are organized in a tree in Angular. The detector, in turn, is shaped like a tree. When an asynchronous event occurs, dirty checks start at the root and run down all the child components 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

Object.defineProperties(data,{
   name:{
     set(val){
       //console.log(this==data); true
       for(let item of inputs){
         if(item.getAttribute("v-model") = ="name"){
           item.value=val;
         }
       }
       cloneList.forEach((item,index) = >{
         nodeList[index].innerHTML=item.innerHTML.replace(/\{\{name}}/g,()=>val)
       })
     },
     get(){
        // do something}},age:{}
 });
Copy the code