What are the advantages of vue
vue.js is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue adopts a bottom-up incremental development design. Vue's core library only focuses on the view layer, and is very easy to learn, and very easy to integrate with other libraries or existing projects. On the other hand, Vue is fully capable of driving complex single-page applications developed with single-file components and libraries supported by the Vue ecosystem.
Advantages of vue:
Lightweight framework
Only focus on the view layer, which is a collection of views for building data, with a size of only tens of kb
Vue.js provides efficient data binding and flexible component system through concise API
Easy to learn
Developed by Chinese people, Chinese documents, no language barriers, easy to understand and learn
Two-way data binding
Vue.js realizes the two-way binding of data through the idea of MVVM, so that developers no longer need to manipulate dom objects and have more time to think about business logic.
Vue's two-way binding principle and step by step implementation of MVVM
Componentization
Vue.js uses components to split various modules in a single-page application into a single component (component)
View, data, and structure separation
Make the data change easier, no need to modify the logic code, only need to manipulate the data to complete the related operations
Virtual DOM
The browser itself also has a performance bottleneck in processing the DOM, especially in traditional development, when the DOM is frequently operated with JQuery or native JavaScript DOM manipulation functions, the browser must constantly render a new DOM tree, causing the page to look It's very lagging.
Vue.js introduced in version 2.0 Virtual DOMof the concept, a fact to the Virtual DOM JavaScript对象(vnode node) as the basis to simulate the DOM tree structure, the tree structure contains information about the entire structure of the DOM.
The ultimate goal of virtual DOM is to render virtual nodes onto the view. But if you directly use virtual nodes to overwrite old nodes, there will be a lot of unnecessary DOM operations. For example, there are many li tags under a ul tag, and only one li tag has changed. In this case, if a new ul is used to replace the old ul, performance will be wasted due to 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 of the view during the process of mapping the virtual node to the view, and finds out the node that really needs to be updated to perform the DOM operation. Avoid manipulating other DOM elements that do not need to be changed.
Virtual DOM mainly does two 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
Why use virtual DOM
- With cross-platform advantage, since
Virtual DOMisJavaScript对象based on platform independent of the real environment, so it has the ability to cross-platform, such as browser platform, Weex, Node and so on. - Operating DOM is slow and JS running efficiently. You can put DOM comparison operations on the JS layer to improve efficiency. Because
DOM操作的执行速度远不如JavaScript运算速度快, therefore, a large number of DOM operations are transferred to JavaScript and usedpatching算法to calculate the nodes that really need to be updated最大限度地减少DOM操作, thereby significantly improving performance. Vritual DOM is essentially a cache between JS and DOM. JS only operates 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 and frequent data update, it can update the view reasonably and efficiently.
Vue vs. other frameworks
Compare with other frameworks-official documents
谢谢你阅读到了最后
期待你关注、收藏、评论、点赞
What are the advantages of
vue? Vue framework (why use Vue and what are the advantages)