1. 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 view and Model. It has two directions: one is to convert the [model] into the [view], which is to convert the data passed by the back end into the page to be seen. This is done by data binding. The second is to transform [view] into [model], that is, to see the page 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.
1. Definition of 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. Viewmodels exist to extract business logic from Controller, not to replace Controller. Other view operations and so on should still be implemented in 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.
2. Why is there an MVVM framework?
Over the last 10 years, we’ve put a lot of traditional server-side code into browsers, resulting in thousands of lines of javascript code that 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 browser compatibility problems, 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 frameworks such as MVVM pattern. Vue, for example, greatly improves development efficiency through two-way data binding.
3. MVVM Framework:
VUE is a set of framework based on MVVM mode, 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 vue is a progressive javascript framework, what does progressive mean? 1. If you already have an existing server application, you can embed VUE as part of the application for 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 scoped CSS or SCSS. 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 is reactive, which means that when our data changes, VUE updates all of your web pages where it is used. About the reactive principle, officials have made it clear that don’t understand, can see at https://cn.vuejs.org/v2/guide/reactivity.html. Let’s take a look at how the main frameworks implement bidirectional binding (reactive) : Angularangular. js uses dirty value detection to determine whether or not the view has been updated. The easiest way to update a view is to use setInterval() polling to detect data changes. Angular only checks for dirty values when specified events are triggered: DOM events, such as when a user enters text, clicks a button, and so on. (ng-click) XHR response event ($HTTP) Browser Location change event ($Location) Timer event ($timeout, $interval) performs $digest() or $apply(). Angular components are organized as a tree, and the detector is 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 Vue instance’s data option. Vue iterates through all of the object’s properties. We use object.defineProperty () to convert all of these properties to setter and getter methods. Getter methods are called when a property in data is accessed, and setter methods are called when a property in data is changed. Compile instruction parser, which parses the instructions of each element node, replaces the template data, and binds the corresponding update function, 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 calls the update method of the subscriber.