Compare to other frameworks
This page is undoubtedly the most difficult to write, but we think it is also very important. Maybe you have encountered some problems and solved them using other frameworks. Your purpose here is to see if Vue has a better solution. This is what we want to answer here.
Objectively speaking, as a core team member, we obviously prefer Vue and think that Vue will be a better solution to some problems. If we didn't have this belief, we wouldn't be busy working on it all day long. But here we want to describe everything as fairly and accurately as possible. Other frameworks also have significant advantages, such as React's vast ecosystem, or Knockout's browser support covering IE6. We will try to list them all.
We also hope to get your help to keep the documentation up to date, because the world of JavaScript advances so fast. If you notice an inaccuracy or something that doesn't seem quite right, please Submit an Issue and let us know.
Table of Contents
- ##Angular Ember
- Knockout
- ##Polymer
- Riot
Using Virtual DOM
# provides responsive (Reactive) and componentized (Composable) view components.
Keep the focus on the core library and leave other functions such as routing and global state management to related libraries.
You can use the full programming language JavaScript capabilities to build your view pages. For example, you can use temporary variables, the flow control that comes with JS, and directly reference the value in the current JS scope, etc.
The development tools' support for JSX is relatively advanced compared to other currently available Vue templates (for example, linting, type checking, editor auto-completion).
For many developers who are used to HTML, templates are more readable than JSX It feels more natural to write. Of course there is an element of subjective preference here, but if this difference will lead to an improvement in development efficiency, then it has objective value.
HTML-based templates make it easier to gradually migrate existing applications to Vue.
This also makes it easier for designers and new developers to understand and participate in the project.
You can even use other template preprocessors, such as Pug, to write Vue templates.
React
React and Vue have many similarities, they both have:
Due to the many 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 acknowledge the things that make React better than Vue, like the richer ecosystem.
Some of the following chapters may be slightly out of date due to the recent release of React 16. We plan to rewrite this part of the content together with the React community in the near future.
Runtime performance
React and Vue are both very fast, so the speed is not The decisive factor in choosing among them. For specific data performance, you can move to this third-party benchmark, which focuses on the real performance of rendering/updating a very simple component tree.
Optimization
In a React application, when the state of a component changes, it will re-render the entire component subtree with the component as the root.
To avoid unnecessary re-rendering of child components, you need to use PureComponent wherever possible, or manually implement the shouldComponentUpdate method. At the same time, you may need to use immutable data structures to make your components easier to optimize.
However, when using PureComponent and shouldComponentUpdate, you need to ensure that the rendering output of the entire subtree of the component is determined by the props of the component. If this is not the case, such optimizations can lead to imperceptible rendering inconsistencies. This makes component optimization in React come with considerable mental load.
In Vue applications, component dependencies are automatically tracked during the rendering process, so the system can accurately know which components really need to be re-rendered. You can understand that each component has automatically obtained shouldComponentUpdate, and there is no restriction on the subtree problem mentioned above.
This feature of Vue eliminates the need for developers to consider such optimizations and allows them to better focus on the application itself.
HTML & CSS
In React, everything is JavaScript. Not only HTML can be expressed using JSX, but the current trend is increasingly incorporating CSS into JavaScript for processing. This type of approach has its advantages, but there are also trade-offs that not every developer is comfortable with.
The whole idea of Vue is to embrace classic web technologies and expand on them. We will analyze it in detail below.
JSX vs Templates
In React, all component rendering functions rely on JSX. JSX is a syntactic sugar for writing JavaScript using XML syntax.
Using JSX's rendering function has the following advantages:
In fact, Vue also provides rendering functions and even supports JSX. However, our default recommendation is templates. Any HTML that conforms to the specification is a legal Vue template, which also brings some unique advantages:
Some developers think templates mean you need to learn an additional DSL (Domain-Specific Language) to develop - we think this distinction is superficial. First of all, JSX is not free to learn - it is an additional set of syntax on top of JS. At the same time, just as it is easy for people who are familiar with JS to learn JSX, it is also easy for people who are familiar with HTML to learn Vue's template syntax. Finally, the existence of DSL allows us to allow developers to do more things with less code. For example, the various modifiers of v-on require much more to implement the corresponding functions in JSX. code.
Looking more abstractly, we can divide components into two categories: one is presentational and the other is logical. We recommend using templates for the former and JSX or render functions for the latter. The proportion of these two types of components will vary depending on the application type, but overall we find that there are far more presentational components than logical components.
CSS within component scope
Unless you distribute components across multiple files (such as CSS Modules), CSS scope is implemented in React through the CSS-in-JS solution (such as styled-components , glamorous and emotion). This introduces a new component-oriented styling paradigm that is different from the normal CSS writing process. Additionally, while it is supported to extract CSS into a separate stylesheet at build time, the bundle usually requires a runtime program to make these styles take effect. While you can use JavaScript to flexibly handle styles, you also need to weigh the bundle size and runtime overhead.
If you are a CSS-in-JS fan, many mainstream CSS-in-JS libraries also support Vue (such as styled-components-vue and vue -emotion). The main difference between React and Vue here is that Vue’s default method of setting styles is a tag similar to style in Single File Component.
Single File Components Gives you complete control over CSS in the same file as part of the component code.
<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>This optional scoped attribute will automatically add a unique attribute (such as data-v-21e5b78) to specify the scope for the CSS within the component when compiling .list-container:hover will be compiled into something like .list-container[data-v-21e5b78]:hover.
Finally, the style setting in Vue's single-file component is very flexible. With vue-loader, you can use any preprocessor, postprocessor, and even deeply integrate CSS Modules - all in the <style> tag Inside.
Scale
Scale up
Vue and React provides powerful routing to handle large applications. The React community is very innovative in state management (such as Flux, Redux), and these state management patterns and even Redux itself can be easily integrated into Vue applications. In fact, Vue has taken this model further (Vuex) and more deeply integrated Vue's state management solution Vuex, which I believe can bring you a better development experience.
Another important difference between the two is that Vue's routing library and state management library are officially maintained and supported and updated synchronously with the core library. React chooses to leave these issues to the community, thus creating a more decentralized ecosystem. But relatively, React's ecosystem is more prosperous than Vue.
Finally, Vue provides CLI scaffolding, which allows you to build the project very easily through interactive scaffolding guidance. You can even use it to quickly develop prototypes of components. React also provides create-react-app in this regard, but there are still some limitations:
- It does not allow any configuration when the project is generated, The Vue CLI runs on scalable runtime dependencies, which can be extended through
- plugins It only provides a default option for building a single-page application, while Vue provides templates for various purposes.
- It cannot build projects with user-created
- default configurations
, which is particularly useful for pre-established conventions in enterprise environments.
While it is important to note that these limitations are by design, this has its advantages. For example, if your project requirements are very simple, you don't need to customize the build process. You can update it as a dependency. If you read more about
React has a steep learning curve. Before you start learning React, you need to know JSX and ES2015 because many examples use these syntaxes. You'll need to learn the build system, and while you can technically use Babel to compile your code on the fly, this is not recommended for production use.
Just like Vue scales up to be like React, Vue scales down to be like jQuery. You just need to put the following tags on the page to run:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>Then you can write Vue code and apply it to production. You only need to replace it with the min version of the Vue file and you don't have to worry about other performance issues.
Since there is no need to learn JSX, ES2015 and build systems in the initial stage, developers can build a simple application in less than a day by reading the
GuideNative rendering React Native enables you to write apps (iOS and Android) with native rendering capabilities using the same component model. Being able to develop across multiple platforms at the same time is great for developers. Accordingly, Vue and Weex will have official cooperation. Weex is a cross-platform user interface development framework initiated by Alibaba. It is also incubating projects at the Apache Foundation. Weex allows you to use Vue syntax to develop not only Components that run on the browser and can also be used to develop native applications on iOS and Android. At present, Weex is still actively developing, and its maturity cannot compete with React Native. However, the development of Weex is driven by the needs of the world's largest e-commerce companies, and the Vue team will also actively cooperate with the Weex team to ensure a good development experience for developers. Another option is NativeScript-Vue, a NativeScript plugin for building completely native applications using Vue.js. ##MobX Preact and other React-like libraries v-if ##ComplexityVue.js is better than Vue.js in both API and design aspects AngularJS is much simpler, so you can quickly master all its features and start developing. Flexibility and modularity Vue.js is a more flexible and open solution. It allows you to organize your application the way you want, rather than having to follow the rules set by AngularJS at all times, making Vue suitable for a variety of projects. We know it's important to leave the decision to you. This is why we provide a complete system for rapid development based on Vue.js. Vue CLI aims to become the standard foundational tool in the Vue ecosystem. It enables diverse build tools to work together seamlessly with well-established default configurations. This way you can focus on the application itself without spending too much time on configuration. At the same time, it also provides the flexibility to adjust each tool configuration according to actual needs. Data Binding AngularJS uses two-way binding, while Vue forces single-way binding between different components. to data flow. This makes the data flow in the application clearer and easier to understand. Instructions and components Instructions and components are more clearly separated in Vue. Directives only encapsulate DOM operations, while components represent a self-contained independent unit - with its own view and data logic. In AngularJS, everything is done by directives, and components are just a special kind of directive. Runtime Performance Vue has better performance and is very, very easy to optimize because It doesn't use dirty checking. In AngularJS, when there are more and more watchers, it will become slower and slower, because all watchers must be recalculated for every change in the scope. Also, if some watchers trigger another update, the digest cycle may have to run multiple times. AngularJS users often resort to esoteric techniques to solve the problem of dirty checking loops. Sometimes there is no easy way to optimize a scope with 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. All data changes are triggered independently unless there is a clear dependency between them. Interestingly, Angular and Vue use similar designs to solve some problems existing in AngularJS. We will develop the new Angular independently Let’s discuss it because it is a completely different framework from AngularJS. For example: it has an excellent component system, and many implementations have been completely rewritten, and the API has been completely changed. TypeScript Angular actually must be developed in TypeScript because its documentation and learning resources are almost entirely TS-oriented. TS has many benefits - static type checking is very useful in large-scale applications, and it also greatly improves development efficiency for developers with Java and C# backgrounds. However, not everyone wants to use TS - in small and medium-sized projects, introducing TS may not bring many obvious advantages. In these cases, using Vue would be a better choice since using Angular without TS would be challenging. Finally, although the integration of Vue and TS may not be as deep as Angular, we also provide official type declarations and component decorators and know that there are a large number of users Use a combination of Vue TS in a production environment. We are also actively cooperating with Microsoft's TS / VSCode team, with the goal of providing Vue TS users with a better type checking and IDE development experience. Runtime performance Both frameworks are fast and have very similar benchmark data . You can browse specific data to make a more fine-grained comparison, but speed should not be the decisive factor. Volume In terms of volume, recent Angular versions use AOT and tree-shaking techniques have reduced the final code size a lot. But even so, a Vue project that includes Vuex Vue Router (30kB after gzip) is still much smaller than the default project size generated by Flexibility Vue is more flexible than Angular. Vue officially provides build tools to It helps you build your project, but it doesn't limit you on how to organize your application code. Some people may like to have strict code organization standards, but there are also developers who like a more flexible and free approach. Learning Curve To learn Vue, you only need a good foundation in HTML and JavaScript. With these basic skills, you can jump into development very quickly by reading Guide. The learning curve of Angular is very steep - as a framework, its API area is much larger than Vue, and therefore you need to understand more concepts to start working efficiently. Of course, the complexity of Angular itself is due to its design goal of only targeting large and complex applications; but it is undeniable that this also makes it quite unfriendly to less experienced developers. Ember is a versatile framework. It provides a large number of conventions, and once you are familiar with them, development will become very efficient. However, this also means that the learning curve is high and it is not flexible. This means making trade-offs between frameworks and libraries (plus a loosely coupled set of tools). The latter is more freeing, but also requires you to make more architectural decisions. In other words, our best comparison is between the Vue kernel and Ember's template and data modellayer: Vue builds responses on ordinary JavaScript objects, providing automated computed properties. In Ember you need to put everything inside an Ember object and manually declare dependencies for computed properties. Vue’s template syntax can use full-featured JavaScript expressions, while Handlebars’ syntax is very limited compared to helper functions. In terms of performance, Vue is much better than Ember, even with the latest Glimmer engine of Ember 3.x. Vue can automatically update batches, while Ember requires manual management in performance-sensitive scenarios. Knockout is a pioneer in the field of MVVM , and track dependencies. Its responsive system is also very similar to Vue. Its performance in browser support and other aspects is also impressive. It can support at least IE6, while Vue can only support IE9 at least. Knockout has slowed down a bit over time and is starting to look a little stale. For example, its component system lacks complete life cycle event methods, although these are very common nowadays. And compared to Vue, its method is a bit cumbersome to call the interface of the subcomponent. If you are interested in research, you will also find that the two have different concepts of interface design. This can be reflected by the simple Todo List created by each. It may be a bit subjective, but many people think that Vue’s API interface is simpler and more elegant in structure. Polymer is another Google-sponsored project and was in fact an inspiration for Vue. Vue's components can be roughly compared to Polymer's custom elements, and the two have similar development styles. The biggest difference is that Polymer is based on the latest version of the Web Components standard and requires heavyweight polyfills to help work (with performance degradation), and the browser itself does not support these features. In comparison, Vue does not need to rely on polyfills to work when it supports IE9. In the Polymer version, in order to compensate for performance, the team made very limited use of the data binding system. For example, the only expressions supported in Polymer are Boolean negation and a single method call, and the implementation of its computed method is not very flexible. Traverse the DOM tree instead of virtual DOM, but it actually uses a dirty checking mechanism, so it suffers from the same performance issues as AngularJS. webpack and Browserify, while Riot relies on the community to build integrated systems. AngularJS (Angular 1)
Some of the syntax of Vue is very similar to that of AngularJS (e.g. vs ng-if). Because AngularJS was the inspiration for Vue’s early development. However, many problems existing in AngularJS have been solved in Vue. Angular (original Angular 2)
angular-cli using these optimizations (~65KB). Ember
Knockout
Polymer
Riot
##Riot 3.0 provides a similar component-based development model ( Called Tag in Riot), it provides a small and elegant API. Riot and Vue may have many similarities in design philosophies. Although Vue is a bit heavier than Riot, Vue still has many significant advantages:
