Similarities:
They all focus on the core library and leave other functions such as routing and global state management to related libraries;
Each has its own build tool, allowing you to get a project template set up according to best practices;
Both use Virtual DOM (virtual DOM) to improve redrawing performance;
They all have the concept of props, which allows data transfer between components;
Both encourage componentized applications, splitting applications into modules with clear functions to improve reusability.
the difference:
1) Data flow
Vue supports two-way data binding by default, while React has always advocated one-way data flow.
2) Virtual DOM
Vue2.x began to introduce "Virtual DOM", which eliminated the difference with React in this respect, but still has its own characteristics in specific details.
Vue claims that it can calculate the difference of Virtual DOM faster, because it will track the dependencies of each component during the rendering process, without re-rendering the entire component tree. For React, every time the state of the application is changed, all child components will be re-rendered. Of course, this can be controlled through the PureComponent/shouldComponentUpdate lifecycle method, but Vue treats this as a default optimization.
3) Componentization
The biggest difference between React and Vue is the writing of templates.
Vue encourages writing templates that resemble regular HTML. It is written very close to the standard HTML elements, but with some more attributes.
React recommends that all your templates be written in JSX, a common JavaScript syntax extension.
Specifically: the render function in React supports the closure feature, so the imported components can be called directly in render. But in Vue, since the data used in the template must be hung on this for a transit, after importing a component, it needs to be declared in components again.
4) The implementation principles of monitoring data changes are different
Vue can accurately know data changes through getter/setter and some function hijacking, and can achieve good performance without special optimization
By default, React compares references. If it is not optimized (PureComponent/shouldComponentUpdate), it may cause a lot of unnecessary re-rendering of vDOM. This is because Vue uses mutable data, while React emphasizes the immutability of data.
5) High-order components
React can be extended through higher-order components (HOC), while Vue needs to be extended through mixins.
High-order components are high-order functions, and React's components themselves are pure functions, so high-order functions are easy for React. On the contrary, Vue.js uses HTML templates to create view components. At this time, the template cannot be effectively compiled, so Vue cannot be implemented using HOC.
6) Build tools
Both have their own build tools:
React ==> Create React APP
Vue ==> vue-cli
7) Cross-platform
React ==> React Native
Vue ==> Weex