May 07, 2021 Vue.js 2.0
React and Vue have many similarities, both of which are:
Because of the many similarities, we spend more time comparing them in this block. H ere we not only guarantee the accuracy of the technical content, but also take into account the balance of considerations. We need to point out that React is a better place than Vue, like their ecosystem and rich custom renderers.
The React community has been very helpful in our consideration of accurate balance, especially thanks to Dan Abramov from the React team. He was very generous in taking the time to contribute his expertise to help us refine this document, and in the end we were very satisfied with the final result.
So far, Vue has performed better than React in real-world testing. I f you doubt this, read on. We explain why this is the case (and provide a baseline agreed with the React team).
DoM has the highest operating costs when rendering the user interface, and unfortunately no library can make these original operations faster. The best we can do is:
JavaScript overhead is directly related to the mechanism for calculating the necessary DOM operations. Both Vue and React use Virtual DOM to achieve this, but Vue's Virtual DOM implementation (a branch of snabbdom) is much lighter and therefore less expensive than Real.
Vue and React also provide functional components that are less expensive because they are erration-free and not instantiated. V ue is faster when these are used in performance-critical scenarios. T o prove this, we built a simple reference project that renders 10,000 list items 100 times. W e encourage you to try to run based on this. In practice, however, the results will vary depending on the browser and hardware, or even the JavaScript engine.
If you're too lazy to do it, the following numbers come from a 2014 MacBook Air that runs under Chrome 52. To avoid chance, each reference project runs 20 times and is taken from the best results:
| Vue | React | |
|---|---|---|
| Fastest | 23ms | 63ms |
| Median | 42ms | 81ms |
| Average | 51ms | 94ms |
| 95th Perc. | 73ms | 164ms |
| Slowest | 343ms | 453ms |
In React, when the state of a component changes, it triggers the re-rendering of the entire component sub-tree, starting with the component as root.
To avoid unnecessary re-rendering of subcomponents, you need to implement the shouldComponentUpdate anywhere and use an immutable data structure. In Vue, the component's dependencies are automatically tracked during rendering, so the system knows exactly what components actually need to be re-rendered.
This means that unooillyed Vue is much faster than uno-optimized React. Because Vue has improved rendering performance, even fully optimized React is often slower than out-of-the-box Vue.
Obviously, performance in a production environment is critical, and so far we've been talking specifically about that environment. B ut the performance in the development process should not be underestimated. The good part is that most applications are developed quickly enough with Vue and React.
However, if you're developing an application that requires a high level of performance for data visualization or animation, you need to understand that in development, Vue can handle up to 10 frames per second, while React can handle up to less than 1 frame per second.
For most common applications, Vue and React are developed fast enough. However, when prototyping high frame rate data visualizations or animations, we've seen Vue process 10 frames per second during development, while React drops to about 1 frame per second.
This is because React has a large number of checking mechanisms, which allow it to provide many useful warnings and error messages. We also think these are important, but we are also paying closer attention to the performance aspects when implementing these checks.
In React, they're all written by JavaScript, which sounds simple and elegant. U nfortunately, however, HTML and CSS within JavaScript can cause a lot of pain points. I n Vue we adopt and scale on web technologies. Next, you'll be shown some examples of what this means.
In React, all components rely on JSX for rendering functions. J SX is a syntax sugar that uses XML syntax to write Javascript. Here's an example that's been reviewed by the React community:
render () {
let { items } = this.props
let children
if ( items.length > 0 ) {
children = (
<ul>
{items.map( item =>
<li key={item.id}>{item.name}</li>
)}
</ul>
)
} else {
children = <p>No items found.</p>
}
return (
<div className = 'list-container'>
{children}
</div>
)
}The rendering capabilities of JSX have these advantages:
In Vue, we also provide rendering capabilities and support JSX because of the need to use these features sometimes. However, for most components, rendering is not recommended.
In this regard, we provide a simpler template:
<template>
<div class="list-container">
<ul v-if="items.length">
<li v-for="item in items">
{{ item.name }}
</li>
</ul>
<p v-else>No items found.</p>
</div>
</template>The benefits are as follows:
This makes it easier for developers not only to write code, but also for designers and developers to analyze and contribute code.
It's not over yet. V ue embraces HTML instead of reshaping it with JavaScript. Within the template, Vue also allows you to use preprocessors such as Pug (formerly jade).
div.list-container
ul(v-if="items.length")
li(v-for="item in items") {{ item.name }}
p(v-else) No items foundUnless you distribute components across multiple files, such as CSS Modules, there is a warning if CSS is not within the scope of React. Very simple CSS can also work, but slightly more complex points, such as hover status, media queries, pseudo-class selectors, etc., are either redoed with heavy dependencies or simply not used.
Vue, on the other, gives you full access to CSS in each single-file component.
<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>This optional scoped property automatically adds a unique property (such as data-v-21e5b78) to specify a scope for the CSS within the component, and when compiled .list-container:hover will be compiled to something like .list-container (data-v-21e5b78): hover.
Finally, just like HTML, you can choose your preferred CSS preprocessor to write CSS. This allows you to work around the design center, rather than introducing specialized libraries to increase the volume and complexity of your application.
Both Vue and React provide powerful routing for large applications. T he React community is very innovative in state management (e.g. Flux, Redux), and these state management models can be easily integrated into Vue applications, even Redux itself. In fact, Vue takes this model a step further and integrates more deeply into Vue's state management solution, Vuex, which believes it will give you a better development experience.
Another important difference between the two is that Vue's routing and state management libraries are officially maintained and updated in sync with the core library. R eact chose to leave these issues to community maintenance, creating a more decentralized ecosystem. In contrast, react's ecosystem is more prosperous than Vue's.
Finally, Vue offers Vue-cli scaffolding that makes it easy to build projects that include Webpack, Browserify, and even no build system. React also offers create-react-app in this regard, but there are some limitations:
It is important to note that these limitations are deliberately designed, which has its advantages. F or example, if your project requirements are simple, you don't need to customize the build process. Y ou can update it as a dependency. If you read more about different design concepts .
React learning curve is steep, and you need to know about JSX and ES2015 before you start learning React, because many examples use these syntaxes. You need to learn to build a system, and while you can technically compile code in real time with Babel, this is not recommended for production environments.
Just as Vue scales up like React, Vue scales down like jQuery. You just put the following tabs on the page to run:
<script src="https://unpkg.com/vue/dist/vue.js" rel="external nofollow" ></script>
Then you can write Vue code and apply it to production, so you don't have to worry about other performance issues until you replace it with a min version of the Vue file.
Since you don't need to learn JSX, ES2015, and build systems in the early stages, developers only need less than a day to read this tutorial to build simple applications.
ReactNative enables you to write locally rendered APPS (IOS and Android) with the same component model. I t's great for developers to be able to develop across multiple platforms at the same time. A ccordingly, Vue and Weex will work together officially, weex is Ali's cross-platform user interface development framework, and Weex's JavaScript framework runs with Vue. This means that with Weex, the components you develop using Vue syntax can be used not only on the browser side, but also for native apps on IOS and Android.
For now, Weex is still growing, and maturity can't compete with ReactNative. However, Weex's growth is driven by the needs of the world's largest e-commerce company, and the Vue team will work actively with the Weex team to ensure a good development experience for developers.
Mobx is popular in the React community and actually uses almost the same reaction system in Vue. To a limited extent, React and Mobx can also be considered more cumbersome Vue, so if you're used to combining them, it makes more sense to choose Vue.
Some of Vue's syntax is similar to Angular's (e.g. v-if vs ng-if). B ecause Angular was the inspiration for Vue's early development. However, many of the issues that exist in Augular have been resolved in Vue.
Vue.js is much simpler than Angular 1 in both API and design, so you can quickly master all its features and get them into development.
Vue .js is a more flexible and open solution. I t allows you to organize your application the way you want, rather than following the rules set by Angular 1 at all times, which allows Vue to work on a variety of projects. W e know that it is necessary to give you the right to decide. That's why we offer Webpack template, which gives you a few minutes to choose whether to enable advanced features such as hot module loading, linting, CSS extraction, and more.
Angular 1 uses two-way binding, and Vue enforces one-way traffic between different components. This makes the flow of data in your app clearer and easier to understand.
Instructions and components are more clearly divided in Vue. D irectives encapsulate only DOM operations, and components represent a self-sufficient independent unit -- with its own view and data logic. There's a lot of mixing between the two in Angular.
Vue has better performance and is very, very easy to optimize because it does not use dirty checks.
In Angular 1, as watchers grow, they become slower and slower because every change in the scope, all watchers are recalculated. A lso, if some watcher triggers another update, the dirty check cycle may have to run more than once. A ngular users often use esotery techniques to solve the problem of dirty check cycles. Sometimes there is no easy way to optimize the scope of a large number of watchers.
Vue does not have this problem at all because it uses an observation system based on dependency tracking and asynchronous queue updates, and all data changes are triggered independently unless there is a clear dependency between them.
Interestingly, Angular 2 and Vue solve some of the problems in Angular 1 with similar designs.
We classify Augluar 2 separately because it's a completely new framework. For example, it has a good component system, and many implementations have been completely rewritten and the API has completely changed.
Angular 1 is for smaller applications, and Angular 2 has shifted its focus to large enterprise applications. TypeScript is often referenced at this point and is useful for those who prefer safe languages such as Java or C#.
Vue is also great for making enterprise apps, and you can also support TypeScript by using an official type or user-contributed decorator, which is completely optional.
In terms of performance, both frameworks are very fast. H owever, there are not enough data use cases to present them. If you have to quantify this data, you can look at a third-party reference that indicates that Vue 2 is faster than Angular2.
In terms of size, although Angular 2 uses tree-shaking and offline compilation techniques to reduce the size of the code a lot. H owever, Vue2 (23kb) with compiler and full functionality is much smaller than Angular 2 (50kb). Note, however, that app size reduction with Angular 2 uses tree-shaking to remove features that are not used in the framework, but as features are introduced, the size becomes larger and larger.
Vue is more flexible than Angular 2, and Vue officially provides build tools to help you build your project, but it doesn't limit how you build it. Some people may like to build in a unified way, and many developers like this flexible and free way.
When you get started with Vue, you're using JavaScript (that is, pure JavaScript) that's familiar with HTML and is ES5 compliant. With these basic skills, you can quickly master it and get into development.
The learning curve of Angular 2 is very steep. E ven excluding TypeScript, its Start Guide uses the ES2015 standard JavaScript, 18 NPM-dependent packages, four files, and more than 3,000 words of introductions, all for Hello World. orld is simple. We don't even have to spend an entire page introducing it.
Ember is an all-powerful framework. I t provides a lot of conventions, and once you're familiar with them, development becomes efficient. H owever, this also means that the learning curve is high and not flexible. T his means making trade-offs between the framework and the library (plus a series of loosely coupled tools). The latter will be more liberal, but it also requires you to make more architectural decisions.
That said, our best comparison is the template and data model layers of the Vue kernel and Ember:
Knockout is a pioneer in the MVVM domain and tracks dependencies. I ts response system is similar to Vue's. I ts performance in browser support and other areas is also impressive. It supports IE6 at a minimum, while Vue supports IE9 at a minimum.
Over time, Knockout's growth has slowed down and is a little older. F or example, its component systems lack a complete approach to lifecycle events, although these are now very common. And its methods are a bit clunky compared to the interfaces that Vue calls sub-components.
If you are interested in research, you will also find that the two are different in the concept of interface design. T his can be reflected in the simple Todo List that you created separately. It may be a bit subjective, but many people think Vue's API interface is simpler and more elegant.
Polymer is another Google-sponsored project and is in fact an inspiration for Vue. V ue's components can be roughly likened to Polymer's custom elements, and both have similar development styles. T he biggest difference is that Polymer is based on the latest version of the Web Components standard and requires heavyweight polyfills to help with the work (performance decline), which is not supported by the browser itself. By contrast, Vue does not need to rely on polyfills to work when it supports IE9.
In Polymer 1.0, the team had very limited use of data binding systems to compensate for performance. For example, the only expression supported in Polymer is a Boolean negative and a single method call, and its computed method implementation is not very flexible.
Polymer custom elements are created with HTML files, which restricts the use of JavaScript/CSS (and language features that are generally supported by modern browsers). In contrast, Vue's single-file components allow you to use the ES2015 and the CSS precompiled processor you want to use very easily.
When deploying a production environment, Polymer recommends using HTML Imports to load all resources. T his requires both the server and the client to support the Http 2.0 protocol, and the browser implements this standard. W hether this works depends on your target user and deployment environment. I f the situation is poor, you must package the Polymer element with the Vulcanizer tool. I n this regard, Vue can combine the characteristics of asynchronous components with the code segmentation of Webpack to achieve lazy-loaded. This also ensures compatibility with older browsers and faster loading.
Deep integration of Vue and Web Component standards is also possible, such as in the style encapsulation of Custom Elements, Shadow DOM. Until we make a serious commitment to fulfill it, however, we are still waiting for the standards to mature and then be widely used in mainstream browsers.
Riot 2.0 provides a component-based development model (called Tag in Riot) that provides a compact and beautiful API. R iot and Vue may have many similarities in design philosophy. Although Vue is a little heavier than Riot, Vue has many significant advantages: