Small details of Vue.js and MVVM

MVVM is an acronym for Model-view-viewmodel, a front-end development-based architecture model that provides two-way data binding to the view and view models, which allows the state changes of the view model to be automatically passed to view, which is called data bidirectional binding .

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

Why does MVVM appear?

I contacted MVVM in 2015, and it could be said that 2015 was the hottest year for MVVM, and before that, all I knew was MVC, which was about 5 years ago, in 2011, when just learning programming languages, Learning Java, and Java's 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 always no deep understanding, only to stay on the level of use, until the contact Vue.js, research the MVVM architecture, and then look back to MVC, there is a sense of the enlightened ~

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

View is used to present data in a way that the user model is actually a data controller that receives and processes requests from the user and returns the model to the user

In those years of HTML5, the best practice for MVC as a Web application is OK, because the view layer of the Web application is relatively simple, the data needed at the front end can be handled basically at the back end, and the view layer is mainly to do the display, which was advocated Controller to handle complex business logic, so the view layer is relatively lightweight, the so-called thin client idea.

From 2010 to 2011, the concept of HTML5 was stir and sought after, and in 2012 the official announcement of the HTML5 specification had been formally finalized. 2013 when I first entered the company, I came into contact with a HTML5 framework sench touch, Sench Touch is a HTML5 framework for building mobile applications that completely separates the front and back, using the MVC architecture as a standalone project to maintain.

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

Relative to HTML4, HTML5 's biggest highlight is that it provides some very useful features for mobile devices , which makes HTML5 have the ability to develop apps, and the biggest benefit of HTML5 development app is cross-platform, fast iteration and on-line, saving labor cost and submitting efficiency. So many enterprises began to transform the traditional app, gradually using H5 instead of native page, by 2015, many apps on the market are more or less embedded H5 page.

Since the use of H5 to build the App, what the view layer does is not just a simple data display, to manage data, manage the various state of user operations, but also to deal with mobile devices on the user's various actions and so on. Therefore, the front end also needs an MVC-like framework to manage these complex logic to make development more efficient. But MVC is slightly different at this point:

View UI layout, presentation 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 conforms to the layered idea of software architecture. But in fact, with the continuous development of H5, people want to use H5 development of the application can be comparable with native, or close to the native app experience, so the complexity of the front-end application is different from the past, not the same. At this point the front end exposes three important pain point problems:

12. A large number of DOM operations reduce page rendering performance, slow loading, and impact the user experience. 
   This kind of work is not only cumbersome, but also difficult to maintain the complex and changeable data state.

In fact, the advent of early jquery is for the front-end to more concise operation of the DOM, but it only solves the first problem, the following two problems are always accompanied by the front-end always exists.

The advent of MVVM perfectly solves the above three problems.

MVVM is made up of three parts, the model layer represents the data model, and the business logic of data modification and manipulation can be defined in model Model,view,viewmodel. View represents the UI component, which is responsible for transforming the data model into a UI display, ViewModel is an object that synchronizes view and model.

In the MVVM architecture, there is no direct connection between the view and the model, but through viewmodel interaction, the interaction between model and ViewModel is bidirectional, so the view data changes are synchronized to the model, and the model Changes in the data are also immediately reflected in the view.

The ViewModel connects the view layer to the model layer through two-way data binding, and the synchronization between the view and model is completely automatic without human intervention, so developers need to focus on the business logic, do not have to manually manipulate the DOM, and do not need to focus on the synchronization of the data state. Complex data state maintenance is managed entirely by MVVM.

Details of the Vue.js

Vue.js can be said to be the best practice of the MVVM architecture, focusing on the ViewModel in MVVM, not only the data two-way binding, but also a relatively lightweight JS library, the API is simple, easy to get started. Vue's basic knowledge on the web has ready-made tutorials, not to be mentioned here, here is a brief look at the vue.js about two-way binding implementation Details:

Vue.js uses Object.defineproperty getter and setter, and combines the observer pattern to achieve data binding. When a plain Javascript object is passed to the Vue instance as its data option, Vue iterates over its properties and uses Object.defineproperty to convert them to getter/setter. Users don't see getter/setters, but internally they let Vue track dependencies and notify changes when properties are accessed and modified.

Observer data Listener, the ability to listen to all the properties of the data object, if there is a change to get the latest value and notify Subscribers, the internal use of Object.defineproperty getter and setter to implement the compile  instruction parser, Its role is to scan and parse the instructions of each element node, replace the data according to the instruction template, and bind the corresponding update function watcher  subscribers,   as bridges connecting Observer and Compile, able to subscribe to and receive notifications for each attribute change, Executes the corresponding callback function of the directive binding DEP      message Subscriber, internally maintained an array to collect subscribers (watcher), data changes trigger Notify function, and then call the Subscriber's Update method

When the new Vue () is executed, Vue enters the initialization phase, while Vue iterates through the properties in the data option, converts them to getter/setter with Object.defineproperty, and realizes the data change monitoring function, on the other hand, Vue's instructions The compiler compile the instructions for the element nodes, initializes the view, and subscribes to 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 Observer is triggered, the setter calls Dep.notify () immediately, DEP begins to traverse all subscribers, and the subscriber's Update method is called, and the Subscriber receives the notification and updates the view accordingly. Complete data binding once.

The above content is I in the big six months of project practice, to MVVM and vue.js a little simple understanding and summary, hope to help you!

@by One pixel 2016.11

Small details of Vue.js and MVVM