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

Editor to share with you what problems vuejs has solved, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Vuejs solves the problem that the control layer in the MVC pattern is too heavy and there is too much interoperation for the View layer. Vue only cares about the view layer, that is, it separates the DOM in the HTML from the other parts to deal with it; Vue doesn't care about the complex structure of the DOM elements, but how the data should be stored.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

I. the current situation of the entire front-end technology stack

Vue is a front-end technology, so before we learn about Vue, let's take a look at the technologies and levels of the entire front-end technology stack:

1 、 Html5+Css3+Jquery

This is the most basic front-end technology stack, that is, we want to achieve a front-end page, at least to master the foundation, Html and Css is the front-end page elements and styles of the basic language, and Jquery can be understood as using JavaScript encapsulated script function library, if very proficient in JavaScript, using Jquery is naturally very handy.

At present, very few companies purely use this combination technology, and generally cooperate with the third-party framework to achieve it, mainly in order to meet the deadline.

2 、 Augular 、 Vue 、 React

All three frameworks have good performance and support basic functions such as data binding, components and so on. The frameworks discussed here are component-based. A component gets an input, and after some internal behavior / calculation, it returns a rendered UI template (a login / write-off area or a to-do list item) as output. React and Vue are better at dealing with components, and Angular provides strong constraints on how to build applications, as well as more out-of-the-box capabilities. In general, Vue and React are often used for small and medium-sized projects, or some large projects, while Angular is usually used for large projects because of its heavy weight.

At present, most Internet companies use one of these three frameworks. For example, DiDi, ele.me and Xiaomi Mobile Mall use Vue, while Ali and Zhihu's comment functions use React and React-native, Guangfa Securities, ZTE soft Chuang, Haier Rishun and other companies use Angular 2 (2016 statistics).

3 、 Node.js

Node.js is a server technology. We all know that the client makes a service request, while the server is responsible for processing the request and providing services. For the Internet, before Node.js, JavaScript is a complete client-side technology, which is used in browsers to achieve all kinds of animation, operation of DOM and so on. The back end, that is, the server side, is implemented by PHP, Python, Ruby, Java and other languages. The emergence of Node.js enables the front and back end to use the same language, and the dream of a unified model can be realized.

To put it bluntly, Node.js can achieve the function of the server. At present, the main app background of the big search car, Taobao data Rubik's cube and other products all use Node.js as the service background.

There is a consensus that when a front-end developer learns Node.js, he can call himself a "full stack engineer". Haha.

PS: I can Java backstage myself, and I know part of the front end. Can I also call myself "pseudo full stack" (funny)?

4. Mixed app development (Ionic, ReactNative, etc.)

Hybrid app development is to embed web technologies such as HTML on the APP applications of native Android (Android) and IOS (Apple) smartphone systems to achieve the mixing of native and HTML. Because the development of native APP needs to spend a lot of time and development cost, so the mode of mixed development is generally adopted to greatly improve the development efficiency and cost, which is the mainstream development mode of APP at present. Of course, there are some pure HTML5 mobile apps with an APP shell on the outside.

Ionic is a hybrid mobile application development scheme based on Apache Cordova. Its advantage is that mobile applications can be developed using the standard front-end development technologies: HTML, JavaScript and CSS. Ionic also provides rich components to simplify mobile application development. These components have a similar look and feel to native components on different platforms. Ionic can also interact with the underlying system through Apache Cordova, calling native functions such as phone books and cameras.

React Native achieves the effect that only JavaScript can be used to write native mobile applications. Its design principle is consistent with React, and it builds a rich and colorful user interface through declarative component mechanisms. With React Native, you can write code once and deploy to Android and iOS operating systems multiple times. For some startups, this saves costs and frees up time for programmers to accomplish other important tasks.

The above is the current situation of the entire front-end technology stack, which allows us to have a general understanding of the whole front-end ecology, and let us know the positioning of the Vue technology we are about to learn in the front-end technology stack.

II. Introduction of Vue and the pain points to be solved

Vue is a JavaScript-based front-end framework, is a domestic framework, the author is you Yuxi (the creator of the famous progressive JavaScript framework vuejs.org).

Vue is a single-page framework, based on modular and component-based development model, which is characterized by simplicity, flexibility and efficiency, and is widely used in many small and medium-sized enterprises in China.

After saying so many big, empty and empty words, you may still not know what Vue does. Here we should start with the two major features of Vue, namely, "View layer-based Framework" and "MVVM Mode".

1. MVC mode and its defects

Many children's shoes may not know what "MVVM pattern" is, but they generally know when it comes to "MVC pattern". The "MVC" design pattern is model,view,control, that is, the data model, view layer, and control layer, such as Jquery:

We can understand that the DOM elements on the web page, such as p, are "View views", while the data sources that change the attributes or values of DOM elements (such as Ajax getting data from the server) can be understood as "model data model", while scripts such as Jquery are used to implement page dynamic interaction and respond to user interaction through event mechanisms (for example, a dialog box pops up after the user clicks a button. Or modify the value in the label), that is, the control layer.

What are the disadvantages of the traditional "MVC mode"? In fact, the biggest disadvantage is that the control layer takes on too much interactive logic for the View layer. For example, if you find a parent element of a p element that is nested in many layers, you may have to write "$('# xxx'). Parent (). Parent (). Parent ()" when using Jquery, and this code will be modified if there are other layer parent elements in the middle layer later. Similar to this kind of related and nested DOM elements, will increase with the complexity of the page, when the modification of these complex elements will become particularly difficult, or even affect the whole body.

2. MVVM mode and the problems solved.

The most powerful thing about Vue is that it solves the problem of overweight control layer above. For Vue, it only cares about the view layer, that is, to separate the DOM in the HTML from the other parts into a layer to deal with it. Vue doesn't care about the complex structure of DOM elements, but how the data should be stored. This is the use of the "MVVM pattern" design concept.

In "MVVM mode", the control layer is replaced with the "ViewModel" layer:

What does ViewModel do? It realizes the automatic synchronization of View and Model, that is, when the attribute of Model changes, we no longer have to manually manipulate the Dom element to change the display of View, but automatically change the corresponding View layer display after changing the attribute. We can understand that we only need to adjust the element attributes, and the rest of the DOM operation will be done by the framework for us. Doesn't that solve the problem we mentioned above? Let's talk about how Vue solves these problems.

3. Advantages of Vue

Vue has three advantages: "declarative and responsive data binding", "component-based development" and "Virtual DOM":

(1) declarative and responsive data binding

To manipulate a DOM element using traditional JQuery or native JavaScript, you need to get the DOM element object first, and then modify the corresponding value of the object. And Vue only need to bind the value to be modified to the js object (for example, a large module containing multiple child elements only needs to assign a js object), and then modify the value of the js object, then the Vue framework will automatically update the value of the DOM element, we only need to care about the modification of the js object value, do not need to care about DOM operation.

For example, the following example:

Vue.js test

{{message}}

Var app = new Vue ({el:'# app', data: {message: 'Hello app', data'}})

Effect:

When we type text in input, the content in the p tag below appears synchronously. Here, the value in the p tag is bound to the js object, where the js object is generated as a whole component with id as the whole p and its child elements of app.

Here, the change of the DOM element with the change of the value of the js object is called unidirectional data binding, and if the value of the js object also changes with the value of the DOM element, it is called bidirectional data binding.

(2) component-based development

For a single-page mobile application, there are often many modules that need to be written, and there is no obvious difference between these modules, for example, the two p achieve similar effects, but in order to ensure that the logic under different modules is different, it is necessary to give various names to each element with similar functions and incompatible single control to avoid logical string modules. Sometimes input alone may have to give several names. For example, the above module is the supplier collection information, the following module is the supplier payment information, both input should display the supplier name, but id can not be reread, it can only be named similar to supplierName1, supplierName2 name. If multiple people work together to develop a single page, there will be more problems.

Vue introduces the idea of component-based development, splitting various modules in a single-page application into a single component (component). We only need to set a js object (labeled as the id of the parent element) for the parent application of the module, and then write the parameters to be passed into the component in the component tag (just like passing a parameter to the function, this parameter is called the attribute of the component) Then write the implementation of the various components separately.

For example, the scenario in which the supplier collects payment can be realized through Vue as follows:

Vue.js Test supplier name: payment Information:

{{message}} payment of 1000 yuan

Supplier name: collection Information:

{{message}} collect 2000 yuan

Var app1 = new Vue ({el:'# app1', data: {message: 'Jialong Chemical Plant'}}) var app2 = new Vue ({el:'# app2', data: {message: 'Millennium Plastics Factory'}})

Effect:

At this point, we only need to modify the message under each parent js object. Programmer A modifies app1 and the following elements, which does not affect programmer B's modification of elements under app2. Even if the name of the value is the same, it only has something to do with the parent tag of the binding. This enables the packaging and binding of the DOM element to the value of the js object.

(3) Virtual DOM

Virtual DOM is the English of virtual DOM. To put it simply, it is a kind of calculation that can be carried out in advance through JavaScript, and the final DOM operation can be calculated and optimized. Because this DOM operation belongs to preprocessing operation, there is no real operation DOM, so it is called virtual DOM. Finally, the DOM operation is actually submitted after the calculation, and the change of the DOM operation is reflected on the DOM tree. This logic is designed to solve the stutter caused by browsers constantly rendering DOM trees, and it is also a way to solve the bottleneck of DOM performance.

This involves the processing kernel logic of Vue, which can be understood without expanding it here.

These are all the contents of the article "what problems did vuejs solve?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to 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.