Vue.js and MVVM Considerations _javascript Tips

MVVM is the acronym for Model-view-viewmodel, an architectural model based on front-end development, whose core is to provide bidirectional data binding to view and view model, which allows the view model's state changes to be automatically passed to view, This is called the data two-way binding.

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

Why is there MVVM?

I contacted MVVM in 2015, it can be said that 2015 is the hottest year of MVVM, and before that, I know MVC, MVC is about 5 years ago, that is, 2011 when the contact, just learn programming language, learning Java, and Java classic SSH The framework is used to build a standard MVC architecture. To tell the truth, the MVC architecture has been used for so many years, but there is no deep understanding, only to stay on the level of use, until contact with Vue.js, the study of MVVM architecture, and then look back at MVC, there is a kind of enlightened feeling ~

MVC is the acronym for Model-view-controller, the model-view-controller, which means that a standard Web application consists of three parts:

View is used to present data in some way to the user

Model is actually data

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

In those years when HTML5 had not yet come to fire, MVC's best practice for Web applications is OK, because the view layer of the Web application is relatively simple, the data needed at the front end can be largely handled at the back end, and the view layer is primarily a showcase, and it advocates Controller to handle complex business logic, so the view layer is relatively lightweight, which is called thin-client thinking.

From 2010 to 2011, the concept of HTML5 was hyped and sought after, and in 2012 the consortium officially announced that the HTML5 specification had been formally finalized. When I first entered the company in 2013, I came into contact with a HTML5 frame sench touch, sench touches is a HTML5 framework for building mobile applications that completely separates the front and back ends and uses the MVC architecture as an independent project to maintain.

Why is the front-end to be engineered if MVC is used?

Relatively HTML4, HTML5 's biggest bright spot is that it provides some very useful functions for mobile devices, so that HTML5 has the ability to develop the app, HTML5 development app's biggest advantage is cross-platform, rapid iteration and on-line, save labor cost and delivery efficiency, So many enterprises began to transform the traditional app, gradually using H5 instead of native page, by 2015, the market many apps more or less embedded all the H5 page.

Now that you want to use H5 to build the APP, the view layer does more than simply show the data, manage the data, manage the various states of the user's actions, and deal with the various user actions on the mobile device. Therefore, the front-end also needs a framework similar to MVC to manage these complex logic and make development more efficient. But now MVC has changed a little bit:

View UI layout, displaying data

Model Management Data

Controller responds to user actions and updates Model to View

This MVC architecture pattern is OK for the basic application, and it is the layered idea of the software architecture. But in fact, with the continuous development of H5, people would like to use H5 development of the application can be comparable to native, or close to the original app experience effect, so the front-end application complexity has been different from the past. At this point, the front end exposes three important pain point problems:

1. Developers call the same DOM API in code, handling cumbersome, operational redundancy, making the code difficult to maintain.

2. A large number of DOM operations reduces page rendering performance, slows loading, and affects user experience.

3. When model changes frequently, developers need to proactively update to view; When the user's actions lead to changes in model, the developer also needs to synchronize the changed data into model,
Such work is not only cumbersome, but also difficult to maintain complex and volatile data state.
In fact, early jquery was designed to make the front end simpler to manipulate the DOM, but it solved only the first problem, and the two problems that followed were always there.

The appearance of MVVM solves the above three problems perfectly.

MVVM consists of three parts of Model,view,viewmodel, the model layer represents the data model, can also define data modification and operation of the business logic in model; View represents the UI component, which is responsible for translating the data model into a UI display, ViewModel is an object that synchronizes view and model.

Under the MVVM architecture, there is no direct link between View and model, but through ViewModel interaction, model and ViewModel interaction is two-way, so the view data changes will be synchronized to model, and model Changes in the data will also be immediately reflected in the view.

ViewModel 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 need only focus on business logic, do not need to manually manipulate the DOM, do not need to focus on data state synchronization problems, Complex data state maintenance is completely managed by MVVM.

Details of the Vue.js

Vue.js can be said to be the best practice of MVVM architecture, focus on the ViewModel in MVVM, not only do the data two-way binding, but also a relatively lightweight JS library, API Concise, very easy to get started. Vue's basic knowledge on the web has a ready-made tutorial, no longer repeat here, here is a brief look at some of the implementation details of vue.js about two-way binding:

Vue.js uses the getter and setter of the Object.defineproperty, and combines the observer pattern to implement data binding. When you pass a normal Javascript object to the Vue instance as its data option, Vue traverses its properties and object.defineproperty them to Getter/setter. Users do not see getter/setters, but internally they allow Vue to trace dependencies and notify changes when attributes are accessed and modified.

Observer data Listener, can listen to all the properties of data objects, if change can get the latest value and notify Subscribers, the internal use of Object.defineproperty getter and setter to achieve

Compile instruction parser, which functions to scan and parse instructions for each element node, replace data according to the instruction template, and bind corresponding update functions

Watcher subscribers, as bridges connecting Observer and Compile, are able to subscribe to and receive notification of changes to each attribute, and perform corresponding callback functions for the instruction bindings

DEP message Subscriber, internally maintaining an array to collect subscribers (watcher), data changes trigger the Notify function, and then call the Subscriber's Update method

When the new Vue () is executed, the Vue enters the initialization phase, on the one hand Vue traverses the properties in the data option and object.defineproperty them to Getter/setter to implement the data change monitoring function; On the other hand, the Vue instruction The compiler compile and parses the instructions for the element node, initializes the view, and subscribes to the watcher to update the view, at which point Wather adds itself to the message Subscriber (DEP) and initializes.

When the data changes, the setter method in the Observer is triggered, the setter immediately calls Dep.notify (), Dep begins traversing all subscribers, and invokes the subscriber's Update method, and the Subscriber receives the notification and updates the view accordingly. Completes data binding once.

The above is a small set to introduce the vue.js and MVVM attention, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!