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

This article is to share with you about the role of vuejs on development, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

What are the benefits of vuejs for development?

Vue framework (why use Vue, what are the benefits)

1. What is Vue.js

Vue is a progressive JavaScript framework for building user interfaces.

2. Advantages of Vue.js

Small size: only 33k after compression

Higher running efficiency: based on virtual DOM, a technology that can perform various calculations through JavaScript in advance to calculate and optimize the final DOM operation. Because this DOM operation is a preprocessing operation and there is no real operation DOM, it is called virtual DOM.

Bi-directional data binding: developers no longer have to manipulate DOM objects and devote more energy to business logic

Rich ecology and low learning cost: there are a large number of mature and stable vue.js-based ui frameworks and components on the market, which can be used for rapid development, friendly to beginners, easy to get started, and many learning materials.

3. Why use Vue.js

With the continuous development of front-end technology, front-end development can deal with more and more business, web pages have become more and more powerful and dynamic, these advances are inseparable from JavaScript. In the current development, a lot of server-side code has been put into the browser to execute, which produces thousands of lines of JavaScript code, they connect a variety of HTML and CSS files, but lack of formal organization. This is why more and more front-end developers are using JavaScript framework. At present, the more popular front-end frameworks are Angular, Reac, Vue and so on.

Vue is a friendly, versatile and high-performance JavaScript framework that helps you create a code base that is more maintainable and testable. Vue is a progressive JavaScript framework, that is, if you already have a ready-made server application, you can embed Vue as part of the application to bring a richer interactive experience. Or if you want to put more business logic on the front end, then Vue's core library and its ecosystem can also meet your various needs.

Like other frameworks, Vue allows you to split a web page into reusable components, each containing its own HTML, CSS, and JavaScript to render the corresponding place in the page. If we build a large application, we may need to split things into separate components and files, and use Vue's command-line tools to make it easy to initialize a real project quickly.

Vue init webpack my-project

We can even use the single-file component of Vue, which contains their respective HTML, JavaScript, and scoped CSS or SCSS.

4. MVC, MVP, MVVM design patterns

MVC (Model-View-Controller) is one of the most common software architectures, and it is widely used in the field of software development. MVC itself is easy to understand, but it is not easy to explain the MVP and MVVM derived from it.

4.1 、 MVC

MVC means that the software can be divided into three parts:

View (View): user interface

Controller (Controller): business logic

Model (Model): data saving

The mode of communication between the parts is as follows:

View sends instructions to Controller

After the Controller completes the business logic, the Model is required to change the state

Model sends new data to View and users get feedback

And all communications are unidirectional, as shown in the following figure:

There are two ways to execute the MVC mode:

(1) accept instructions through View and pass them to Controller

(2) accept instructions directly through Controller

A more flexible approach is often used in actual projects:

(1) users can send instructions (DOM event) to View, and then View directly requests Model to change its state.

(2) users can also send instructions directly to Controller (change URL to trigger hashChange event), and then send Controller to view.

(3) Controller is very thin and only plays the role of routing, while View is very thick, and business logic is deployed in View, so Controller is directly cancelled in some frameworks, leaving only one Router (router).

As shown in the figure:

4.2 、 MVP

MVP (Model-View-Presenter) is evolved from the classic MVC. Mode provides data, View is responsible for display, and Presenter is responsible for logical processing.

There is one major difference between MVP and MVC:

There is no contact between View and Model in MVP, the communication between them is through Presenter, and all interactions take place within Presenter (that is, Controller in MVC); while in MVC, View reads data directly from Model rather than through Controller.

The communication between the parts in MVP is bi-directional, while in MVC, the communication between parts is unidirectional.

In MVP, the View is so thin that no business logic is deployed, called a "passive view" (Passive View), that is, there is no initiative, while the Presenter is very thick, where all the logic is deployed.

As shown in the figure:

4.3 、 MVVM

MVVM (Model-View-ViewModel), which is essentially an improved version of MVC, is a more detailed division of labor for View in MVC. ViewModel separates the view UI from the business logic. It fetches the data from the Model while helping to process the business logic designed in the View because of the need to present the content.

The MVVM pattern is similar to the MVP pattern, except that it uses two-way data binding (data-binding), that is, changes in View are automatically reflected in ViewModel, and vice versa.

5. The principle of data-driven (bidirectional data binding)

What is data driven?

Data driving is the most important feature of Vue.js. In vue, the so-called data-driven means that when the data changes, the user interface changes accordingly, and the developer does not need to modify the DOM manually.

For example, when we click on a button, we need the text of the element to do a "yes / no" switch. In traditional jQuery, the process for page modification is usually: bind the event to the button, then get the dom object of the copy corresponding element, and finally modify the text value of the dom object according to the switch.

Data-driven based on Vue

Vue mainly uses data hijacking to achieve two-way data binding, in conjunction with the publisher-subscriber mode, hijacks the setter and getter of each attribute through Object.defineProperty (), publishes a message to the subscriber when the data changes, and triggers the corresponding monitoring callback.

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.

Vue's data bi-directional binding uses MVVM as the entry point for data binding, integrates Observer, Compile and Watcher, monitors the data changes of its own Model through Observer, parses the compilation template instructions through Compile (used to parse {{} template syntax in vue), and finally uses Watcher to build a communication bridge between Observer and Compile to achieve data change-> view update; view interaction change (input)-> data model change bi-directional binding effect.

Understanding of getter and setter

When you print out the properties in the data object under the vue instance, each property has two corresponding get and set methods. As the name implies, get is the value method and set is the assignment method. Normally, values are taken and assigned in the obj.prop way, but there is a problem with this. How do we know that the value of the object has changed?

We can think of get and set as function, and when we call the properties of the object, we go to get. Property () {.}, first determine whether the object has this property, if not, add a name property and assign it a value; if there is a name property, then return the name property. Think of get as a function that takes a value, and the return value of the function is the value it gets.

When assigning a value to an instance, it enters set. Exe. In the val {...}, the parameter val is the value assigned to the attribute, and a lot of things are done in this function, such as two-way binding and so on. Because this value has to go through set every time, it cannot be modified in other ways. In ES5, the object prototype has two properties, _ defineGetter_ and _ defineSetter_, which are specifically used to bind get and set to objects.

6. Virtual DOM

6.1 what is a virtual DOM

The concept of Virtual DOM is introduced in the version 2.0 of Vue.js. Virtual DOM is actually a tree structure that simulates the DOM structure based on JavaScript objects (VNode nodes). This tree structure contains the information of the whole DOM structure. In a nutshell, Virtual DOM can be understood as a simple JS object with at least three attributes: tag, attrs, and children. Different frameworks have different names for these three attributes.

6.2 the role of virtual DOM

The ultimate goal of the virtual DOM is to render the virtual node to the view. But if you directly use the virtual node to overwrite the old node, there will be a lot of unnecessary DOM operations. For example, there are many li tags under a ul tag, of which only one li tag has changed. In this case, if you use the new ul to replace the old ul, it will cause a waste of performance because of these unnecessary DOM operations.

In order to avoid unnecessary DOM operations, the virtual DOM compares the virtual node with the old virtual node used in the last rendering view in the process of mapping the virtual node to the view, and finds out the node that really needs to be updated for DOM operation, so as to avoid operating other DOM elements that do not need to be changed.

In fact, virtual DOM does two main things in Vue.js:

Provide the virtual node VNode corresponding to the real DOM node

Compare the virtual node VNode with the old virtual node oldVNode, and then update the view

6.3Why use virtual DOM

With the advantage of cross-platform, because Virtual DOM is based on JavaScript objects and does not rely on the real platform environment, so it has the ability of cross-platform, such as browser platform, Weex, Node and so on.

The operation of DOM is slow, and the running efficiency of JS is high. You can put the DOM comparison operation on the JS layer to improve the efficiency. Because the execution speed of DOM operation is not as fast as that of JavaScript operation, therefore, a large number of DOM operations are transported to JavaScript, and patching algorithm is used to calculate the nodes that really need to be updated, so as to minimize DOM operations and significantly improve performance. Vritual DOM essentially does a cache between JS and DOM, JS only operates on Virtual DOM, and finally writes the changes to the real DOM.

To improve rendering performance, the advantage of Virtual DOM does not lie in a single operation, but in a large number of frequent data updates, the view can be updated reasonably and efficiently.

These are the effects of vuejs on development, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please 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.