React && Vue
React and Vue have many similarities, and they all have:
- Using Virtual DOM
- Provides reactive and composable view components.
- Keep your attention on the core library, accompanied by supporting routing and libraries responsible for handling global state management.
Due to the numerous similarities, we will spend more time comparing this area. Here we not only ensure the accuracy of technical content, but also take into account balanced considerations. We need to point out where React is better than Vue, like their ecosystem and rich custom renderers.
Performance of React && Vue
Rendering performance
The DOM operational cost is the highest when rendering the user interface, and unfortunately there is no library that makes these original operations faster.
The best we can do is (source google):
Minimize the number of necessary DOM mutations. Both React and Vue use virtual DOM abstractions to accomplish this and both implementations work about equally well.
Add as little overhead (pure JavaScript computations) as possible on top of those DOM manipulations. This is an area where Vue and React differ.
The JavaScript overhead is directly related to the mechanisms of computing the necessary DOM operations. Both Vue and React utilizes Virtual DOM to achieve that, but Vue's Virtual DOM implementation (a fork of snabbdom) is much lighter-weight and thus introduces less overhead than React's.
Update performance
In React, when a component's state changes, it triggers the re-render of the entire component sub-tree, starting at that component as root.
To avoid unnecessary re-renders of child components, you need to implement shouldComponentUpdate everywhere and use immutable data structures. In Vue, a component's dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render.
That is, unoptimized Vue is much faster than unoptimized React. Because Vue improves rendering performance, even fully optimized React is often slower than Vue out of the box.
JSX vs Templates
In React, all components rendering capabilities rely on JSX. JSX is a syntactic sugar for writing Javascript using XML syntax.
render () {
let { items } =
let children
if ( > 0 ) {
children = (
<ul>
{( item =>
<li key={}>{}</li>
)}
</ul>
)
} else {
children = <p>No items found.</p>
}
return (
<div className = 'list-container'>
{children}
</div>
)
}
The rendering function of JSX has the following advantages:
You can use the full programming language JavaScript functionality to build your view pages.
The tool's support for JSX is relatively advanced compared to other Vue templates available (such as linting, type checking, and editor autocomplete).
In Vue, because these functions are sometimes required, Vue also provides rendering and supports JSX. However, for most components, rendering is not recommended.
In this regard, Vue provides a simpler template:
<template>
<div class="list-container">
<ul v-if="">
<li v-for="item in items">
{{ }}
</li>
</ul>
<p v-else>No items found.</p>
</div>
</template>
The advantages are as follows:
During the process of writing templates, the style has been determined and involves fewer functional implementations.
Templates are always declared.
Any HTML syntax in the template is valid.
Read more English-friendly (for each item in items).
There is no need for advanced versions of JavaScript syntax to increase readability.
This is not over yet. Vue embraces HTML, rather than reshaping it with JavaScript. Within the template, Vue also allows you to use preprocessors such as Pug (formerly Jade)
-container
ul(v-if="")
li(v-for="item in items") {{ }}
p(v-else) No items found.
Angular && Vue
Some of Vue's syntax is very similar to Angular (for example, v-if vs ng-if). According to Vue developers, Angular was the inspiration for Vue's early development. However, many problems in Augular have been solved in Vue
Complexity
It's much simpler than Angular 1 in both API and design, so you can quickly grasp its full features and put it into development.
Flexibility and modularity
It is a more flexible and open solution. It allows you to organize your applications the way you want, rather than having to follow the rules set by Angular 1 at any time, which allows Vue to work on a variety of projects. We know that it is very necessary to give you the right to decide.
This is why we provide Webpack template, which allows you to use it for several minutes to choose whether to enable advanced features, such as hot module loading, linting, CSS extraction, etc.
Data binding
Angular 1 uses two-way binding, Vue forces unidirectional data flow between different components. This makes the data flow in the application clearer and easier to understand.
Directives and Components
In Vue, instructions and components are more clearly separated. Instructions only encapsulate DOM operations, while components represent a self-sufficial independent unit—with their own views and data logic. There are quite a few things that the two are mixed in Angular.
performance
Vue has better performance and is very, very easy to optimize because it does not use dirty checking.
In Angular 1, it becomes slower and slower as watchers grow, because every change in scope changes, all watchers need to be recalculated. And, if some watchers trigger another update, the dirty check cycle may have to run multiple times. Angular users often need to use esoteric techniques to solve the problem of dirty check cycles. Sometimes there is no easy way to optimize the scope with a large number of watchers.
Vue does not have this problem at all, because it uses a dependency tracking-based observation system and is updated asynchronously, and all data changes are triggered independently unless there is a clear dependency between them.
Interestingly, Angular 2 and Vue solved some problems in Angular 1 with similar designs
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.