Why learn Vue framework?

vue framework is a good tool for front-end development recently. It can break through that page that have not been updated in real time before. Very promising, many big companies are using it now.

Vue framework was born in 214, and its author is Evan You, a native of China. It is also one of the easiest frameworks for newcomers to start with. Unlike React and Angular, its Chinese documents are also convenient for everyone to read and learn. Vue is a library for building interactive Web interfaces, and it is a progressive framework for building data-driven Web interfaces. The framework follows the CMD specification, and the design mode provided is MVVM mode (model->; View-> View-Model) and a composable component system with simple and flexible API. This framework inherits the virtual DOM technology of React and the bidirectional data binding technology of Angular, and is a relatively new functional framework.

Here's what is virtual DOM and bidirectional data binding:

1. Virtual DOM, as the name implies, is literally a fictional DOM tree. When we use traditional native API or jQuery to operate DOM, the browser will execute the process from the beginning to the end. Even though the computer hardware has been updating and iterating, it is still very expensive to operate the real DOM. The real DOM node, even the simplest div, contains many attributes, so frequent operation will lead to the page being stuck and affect the user's experience. In order to solve this browser performance problem, Virtual DOM(Virtual DOM) is designed, and its core algorithm is Diff algorithm. It will save all the diff contents updated to the real DOM in one operation to a local js object, and finally attach this js object to the DOM tree at one time, and notify the browser to perform the drawing work, thus avoiding a lot of unnecessary calculation.

The advantage of simulating DOM nodes with js objects is that all page updates can be reflected on js objects first, and the speed of operating js objects in memory is obviously much faster. After the update is completed, the final js object will be mapped into a real DOM, which will be drawn by the browser. (improved performance and fast running speed)

2. Two-way data binding. Before we talk about two-way data binding, we want to talk about one-way data binding. One-way data binding is to bind the Model to the View. When we update the Model with JavaScript code, the View will be automatically updated (model->; View）。 Then two-way data binding means that when the user updates the View, the data of the Model will be automatically updated (model <: --> View）。 Under what circumstances can users update View? For the most direct example, fill in the form. When the user fills in the form, the state of View is updated. If the MVVM framework can automatically update the state of Model at this time, it is equivalent to two-way data binding between Model and View. The principle is that we should bind the input to the value attribute (V-bind: value = "...") and bind the variables in the Model to the View (model->; View) and when the user operates the input, event monitoring (v-on: input = "...") is performed to send the update on the View back to the Model (view->; Model) to achieve two-way data binding, in Vue, the above operations are too cumbersome, which provides the effect that v-model can directly achieve two-way data binding.

during the development of Vue project, we can introduce vue through script tag introduction or install vue through npm, the package management tool that comes with nodejs. And create a new instance object of Vue through new Vue (), which has many attributes, including el, data, methods, computed, watch, etc. el is the node element pointing to the page, data stores data, and the data types include simple datatype and complex datatype. Displayed by interpolation expression {{}}, when displaying interpolation, it is not necessary to write data, and the method is stored in methods. The method is called in the form of fn (), and the stored method is also a method, but it is calculated data, and the complex logic should be stored in computed, and the calculated attributes are cached based on their dependencies. Because computed has a layer of cache, Therefore, it will only be re-run when its related dependencies change, while methods are called once, and there is no need to add () when calling methods in computed. watch can also monitor objects for monitoring, monitoring and monitoring the property values in data, and there are two parameters (the currentValue and the value before prevValue).