Vue.js and MVVM Small details __js

MVVM is the acronym for Model-view-viewmodel, an architectural model based on front-end development, with the core of providing two-way data binding to view and ViewModel, which allows ViewModel state changes to be automatically passed to view, That is, the so-called two-way binding of data.

Vue.js is a Javascript library that provides a MVVM-style two-way data binding that focuses 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 would there be 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 framework. To tell the truth, MVC used for so many years, but always did not have a very deep understanding, only to stay in the use of the level, until the contact with the 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 the years before HTML5, MVC's best practice 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 largely handled at the back end, and the view layer is primarily a showcase, when 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 the HTML5 framework Sench touch, a HTML5 framework for building mobile applications that completely separates the front and back ends and uses the MVC architecture as an independent project project to maintain.

Why should the front-end be engineered to use MVC?
Relatively HTML4, HTML5 's biggest bright spot is that it provides some very useful features for mobile devices, making HTML5 have the ability to develop apps, the biggest benefit of HTML5 development app is cross-platform, rapid iteration and online, saving labor costs and improving efficiency. So many companies began to transform the traditional app, gradually using H5 instead of native, by 2015, most apps on the market were more or less embedded in the H5 page.

Now that you want to use H5 to build the APP, the view layer does more than just a simple display of data, not only to manage the complex data state, but also to handle various operational behaviors on mobile devices, and so on. As a result, the front-end also needs to be engineered, and an MVC-like framework is needed to manage these complex logic and make development more efficient. But the MVC here 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 simple applications, and also conforms to the layered thinking of software architecture. But in fact, with the continuous development of H5, people would prefer to use H5 development of the application can be comparable to native, or close to the experience of the original app, so the front-end application of the complexity has been different from the past. At this point the front-end development revealed three pain point problems:

1, developers in the code a large number of calls to the same DOM API, processing cumbersome, operational redundancy, making the code difficult to maintain.

2, a large number of DOM operations to reduce the performance of the page rendering, loading speed slows down, affecting the user experience.

3, when the model changes frequently, developers need to actively update to view; When the user's operation led to changes in model, developers also need to change the data synchronization into Model, such work is not only cumbersome, but also difficult to maintain complex and changeable data state.

In fact, the advent of early jquery was designed to make the front end simpler to manipulate DOM, but it solved only the first problem, while the other two remained with the front end.

MVVM the emergence of the perfect solution to the above three problems
MVVM consists of three parts of Model,view,viewmodel, the model layer represents the data model, you can also define the business logic of data modification and operation in model. The 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 is the use of Object.defineproperty getter and setter, and in conjunction with the Observer mode to achieve 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/setter, 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 changes can get the latest value and notify Subscribers, the internal use of Object.defineproperty getter and setter to achieve.

The Compile instruction parser, which functions to scan and parse instructions for each element node, replaces data according to the instruction template, and binds the corresponding update function.

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

DEP message Subscriber, which maintains an array internally to collect subscribers (watcher), data changes trigger the Notify function, and then calls the subscriber's Update method.

As you can see from the diagram, when the new Vue () is executed, the Vue enters the initialization phase, on the one hand Vue will traverse the properties in the data option, and object.defineproperty convert them to getter/setter to realize the monitoring function of data change. On the other hand, the Vue instruction compiler scans and parses the instruction of an element node compile, initializes the view, and subscribes to watcher to update the view, at which point Wather adds itself to the message Subscriber (DEP) and initializes it.

When the data changes, the setter method in the Observer is triggered, the setter immediately calls Dep.notify (), Dep begins to traverse all subscribers, and the subscriber's Update method is invoked, and the Subscriber updates the view accordingly after receiving the notification.

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

Original link: http://www.cnblogs.com/onepixel/p/6034307.html