Small details of Vue.js and MVVM

Small details of Vue.js and MVVM

Reproduced

Clouds and Zhuge

Links: www.cnblogs.com/lyzg/p/6067766.html

MVVM is an acronym for Model-view-viewmodel, a front-end development-based architecture model that provides two-way data binding to both view and ViewModel, which allows ViewModel state changes to be automatically passed to view, known as 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, I knew MVC, which was about 5 years ago, in 2011, when just learning programming languages, Learning Java, and Java classic SSH The framework is used to build a standard MVC framework. To tell the truth, MVC has been used for so many years, but there is no deep understanding, only to stay in the use of the level, until the contact Vue.js, the study of the MVVM architecture, and then look back to MVC, there is an enlightened feeling ~

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 to the user in some way

Model is actually data

The Controller receives and processes the request from the user and returns the Model to the user

In those years of HTML5, MVC as a 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 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 I just entered the company and I came into contact with the first HTML5 framework Sench Touch, which is a HTML5 framework for building mobile applications that completely separates the front and back, with an MVC architecture on the frontend and maintained as a standalone project engineering.

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 , making HTML5 the ability to develop apps, and the biggest benefit of HTML5 app development is cross-platform, fast iteration and on-line, saving labor costs and improving efficiency. , so many enterprises began to transform the traditional app, gradually using H5 instead of native, by 2015, the market most of the apps are more or less embedded H5 page.

Now that you're using H5 to build your App, what the view layer does is not just a simple data presentation, it's not just about managing complex data states, but also dealing with the various operational behaviors on mobile devices. As a result, the front end also needs to be engineered, and an MVC-like framework is needed to manage these complex logic to make development more efficient. But there's a little bit of a change in MVC here:

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 like to use H5 development of the application can be comparable with native, or close to the experience of the native app, so the front-end application complexity has been different from the past, not the same. At this point, the front-end development exposes three pain point problems:

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

2. a large number of DOM Operations reduce page rendering performance, slow loading, and impact the user experience.

3. when the model changes frequently, developers need to proactively update to View, and when the user's actions cause the model to change, the developer also needs to synchronize the changed data to Model , This kind of work is not only cumbersome, but also difficult to maintain the complex and changeable data state.

In fact, early jquery was designed for the front-end to operate the DOM more succinctly, but it only solves the first problem, and the other two problems always accompany the front end.

The advent of MVVM perfectly solves the above three problems.

MVVM is composed of three parts, the model layer represents the data model, it can also define the business logic of data modification and operation in model Model,view,viewmodel, and the View represents the UI component, which is responsible for transforming the data model into 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 is the use of Object.defineproperty getter and setter, and in conjunction with 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/setter, but internally they let Vue track dependencies and notify changes when properties are accessed and modified.

Observer data Listener, can listen to all the properties of the data object, if there is a change to get the latest value and notify Subscribers, internal use of object. DefineProperty's getter and setter to achieve

The Compile instruction parser, which functions to scan and parse instructions for 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 , are able to subscribe to and receive notifications for each attribute change, executing the corresponding callback function of the instruction binding

DEP Message Subscriber internally maintains an array to collect subscribers (watcher), data changes to trigger notify functions, and then calls the subscriber's update method

As you can see, 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 monitors the data changes, on the other hand, Vue's instruction compiler compile scans and parses the instructions of 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.

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!

Small details of Vue.js and MVVM