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

Editor to share with you the case analysis of mvvm, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Understanding of mvvm: 1. MVVM is the abbreviation of [Model-View-ViewModel], which is an architecture mode based on front-end development; 2, improve the performance of page rendering by DOM operation; 3. When Model changes frequently, developers do not need to actively update to View.

Understanding of mvvm:

MVVM is the abbreviation of Model-View-ViewModel, it is an architecture pattern based on front-end development, its core is to provide two-way data binding to View and ViewModel, which makes the state change of ViewModel can be automatically passed to View, that is, the so-called two-way data binding.

Vue.js is a Javascript library that provides MVVM-style bidirectional data binding, focusing on the View layer. Its core is the VM in MVVM, that is, ViewModel. ViewModel is responsible for connecting View and Model to ensure the consistency of views and data. This lightweight architecture makes front-end development more efficient and convenient.

Why did MVVM appear?

MVC, short for Model-View-Controller, is Model-View-Controller, which means that a standard Web application is made up of these three parts:

View: used to present data to users in some way

Model: it's actually data.

Controller: receives and processes requests from the user and returns Model to the user

In the years when HTML5 was not yet popular, the best practice of MVC as a Web application was OK. This is because the View layer of Web applications is relatively simple, and the data needed by the front end can basically be handled at the back end. The View layer is mainly for display. At that time, Controller was advocated to deal with complex business logic, so the View layer is relatively lightweight, that is, the so-called thin client idea.

Why should the front end be engineered, if MVC is used?

The biggest bright spot relative to HTML4,HTML5 is that it provides some very useful functions for mobile devices, so that HTML5 has the ability to develop App. The biggest advantage of HTML5 in developing App is cross-platform, rapid iteration and online, saving labor costs and improving efficiency. Therefore, many enterprises begin to transform the traditional App, gradually using H5 instead of Native, by 2015. Most App on the market are more or less embedded with H5 pages. Now that H5 is used to build App, what the View layer does is not just a simple data presentation, it not only manages complex data states, but also deals with various operations on mobile devices, and so on. Therefore, the front end also needs to be engineering, and a framework similar to MVC is needed to manage these complex logic and make the development more efficient. But the MVC here has changed a little bit:

View: UI layout, displaying data

Model: managing data

Controller: respond to user actions and update Model to View

This MVC architecture pattern is OK for simple applications, and it also accords with the layered idea of software architecture. But in fact, with the continuous development of H5, people prefer to use H5 to develop applications that are comparable to Native, or close to the experience effect of native App, so the complexity of front-end applications is different and not what it used to be. At this point, the front-end development exposed three pain points:

1. Developers call a large number of the same DOM API in the code, which is tedious and redundant, which makes the code difficult to maintain.

2. A large number of DOM operations degrade the performance of page rendering, slow down the loading speed, and affect the user experience.

3. When Model changes frequently, developers need to actively update to View. When users' actions lead to changes in Model, developers also need to synchronize the changed data to Model, which is not only tedious, but also difficult to maintain complex and changeable data state.

In fact, the emergence of early jquery is designed for the front end to operate DOM more succinctly, but it only solves the first problem, and the other two problems always exist with the front end.

The emergence of MVVM perfectly solves the above three problems.

MVVM is composed of Model, View and ViewModel. The Model layer represents the data model, and the business logic for data modification and operation can also be defined in Model. View represents the UI component, which is responsible for transforming the data model into UI and displaying it. ViewModel is an object that synchronizes View and Model.

Under the MVVM architecture, View and Model do not have a direct connection, but interact through ViewModel. The interaction between Model and ViewModel is bi-directional, so the changes in View data will be synchronized to Model, and the changes in Model data will be immediately reflected on View.

ViewModel connects the View layer and the Model layer through two-way data binding, and the synchronization between View and Model is completely automatic without human intervention, so developers only need to pay attention to business logic, do not need to manually operate DOM, do not need to pay attention to the synchronization of data state, complex data state maintenance is completely managed by MVVM.

Details of Vue.js

Vue.js can be said to be the best practice of MVVM architecture, focusing on ViewModel in MVVM. It not only achieves two-way data binding, but also is a relatively lightweight JS library. API is simple and easy to use. There are ready-made tutorials on the basics of Vue. I won't go into it here. Let's take a brief look at some details of Vue.js 's implementation of two-way binding:

Vue.js uses Object.defineProperty 's getter and setter, combined with the Observer pattern, to implement data binding. 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.

Observer: a data listener that listens to all the attributes of a data object, gets the latest values and notifies subscribers if there are changes. It is internally implemented by Object.defineProperty 's getter and setter.

Compile: instruction parser that scans and parses the instructions of each element node, replaces data according to the instruction template, and binds the corresponding update function

Watcher: a subscriber, as a bridge between Observer and Compile, can subscribe to and receive notification of each property change, and execute the corresponding callback function bound to the instruction

Dep: message subscriber, internally maintains an array to collect subscribers (Watcher), data changes trigger the notify function, and then call the subscriber's update method

As can be seen from the figure, when new Vue () is executed, Vue enters the initialization stage. On the one hand, Vue traverses the properties in the data option and converts them to getter/setter with Object.defineProperty, realizing the data change listening function. On the other hand, Vue's instruction compiler Compile scans and parses the instructions of the element node, initializes the view, and subscribes to Watcher to update the view. Wather will add itself to the message subscriber (Dep) and initialize it.

When the data changes, the setter method in Observer is triggered, setter immediately calls Dep.notify (), Dep starts traversing all the subscribers and calls the subscriber's update method, and the subscriber updates the view accordingly after receiving the notification.

The above is all the contents of this article "case Analysis of mvvm". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.