Abstract

Currently, the top 3 popular JS frameworks are: Angular, React and Vue. After I read the startup benchmark of 3 frameworks, I exclude Angular from the comparison, because the loading time is close to 4x longer than React and Vue. Hence, the article will only compare React and Vue in different dimensions, and discuss the best practise on the two frameworks.

Architecture

The pop front-end architecture is MVC, which isolates the data (model), view (UI) and business logic (controller). We can draw it as following diagram.
Front-end Framework Comparison - 图1
Both React and Vue follow the above architecture to build the framework, and both use components, virtual DOM concepts and data binding knowledge.
The difference between React and Vue is on View part. Vue has a traditional approach with single file components and distinct blocks for HTML templates, styles and JS. There’s no special things. That means, it allows you to migrate your project to Vue component by component. React uses JSX where both HTML and CSS are expressed via Javascript with XML syntax. JSX encapsulates the whole component with a special tag, which makes the component easy to reuse. JSX can feel more powerful and flexible while templates offer a clear separation of concerns preventing you injecting too much logic into the view. If you have heavy UI/UX, JSX is not a good idea, which mixes the HTML and logic into the same file.

State & Lifecycle

The state management is implemented as plugin, for both React and Vue. Redux is the popular state management plugin for React. They offer a single way to modify the state which makes debugger simpler.
Vue uses two-way data binding. You can modify the property of a Vue object directly locally. If you want to have a global state management, you should involve Vuex plugin, which is very similar to Redux. If your state is just live in the current page, Vue is quite easy to implement.

Performance

There are two main metrics that determine the speed of an app: start-up time and runtime.
Both libraries have tiny bundle sizes which speeds up the initial load (31 KB for Vue/84.4 KB uncompressed and 32.5/101.2KB for React). Therefore, the start-up time is very close for React and Vue.
From the benchmark, React performs better on partially updating than Vue. It is because that the Vue state is mutable, but the React is immutable. In React, if you just change elements in a list, it will only apply the partial changes onto the web view, where the data is bound. However, in Vue, if you have a partial change on the data list, you have to rebind the whole data source, and re-rend the template so that it takes much more time than React.
If a component’s state changes, it will trigger the entire sub-tree update in React. If some of sub components do not need to change, you have to explicit to implement shouldComponentUpdate or use PureComponent. In Vue, it can be simple. When a component state is changed, all its dependencies will automatically notified and updated. You don’t need worry about the data consistence and render performance.
According to the above scenarios, I think if we have a large set of data and just update part of the set every time, we need choose React. If we have a complex data dependencies, we can consider Vue first.

Native Rendering

If you want to write a native-rendered apps for iOS and Android, React is the best choice. You can use React Native to creat the app easily. However, the native support for Vue is not muture. Weex or NativeScript-Vue are possible choice, but both of them are not competent of the React.

Ecosystem

The ecosystem is quite different. Vue is a standalone framework. The Vue project team maintain the Vue core library and its major dependent libraries, such as Vuex, Vue-router, etc. React is quite fragmental. The core team just maintain the React Core library. The other major dependecies are developed by the external teams. The popularity of these dependencies are voted by the users.

Conclusion

Choose Vue.js if Choose React if
You need to get a working solution as soon as possible. You want to build a complex enterprise-grade solution/SPA
Your app is pretty simple or has to be lightning-fast. You plan to greatly expand your application’s functionality in the future and would need continuous support
You want to migrate an existing project to a new technology over a period of time but have limited resources You want to build a mobile app
Your team consist mostly of HTML/junior developers to save money You have a team of experienced React developers
Your developers perfer clean code and HTML templates Your develops prefer JavaScript over HTML
You want to build a heavy UI/UX, but have less data update. You want to build a simple page, but have a frequent update on data.

Reference

  1. React vs Vue: What is the best choice for 2019? - https://www.mindk.com/blog/react-vs-vue/
  2. Results for js web frameworks benchmark – round 8 - https://stefankrause.net/js-frameworks-benchmark8/table.html
  3. Vue: Comparison with Other Frameworks - https://vuejs.org/v2/guide/comparison.html
  4. React + Redux 最佳实践 (Chinese) - https://github.com/sorrycc/blog/issues/1