11. Understanding of React and Vue, their similarities and differences
Similarities:
Keep the focus on the core library, and leave other functions such as routing and global state management to related libraries;
Both have their own build tools that allow you to get a project template set according to best practices; both use Virtual DOM (virtual DOM) to improve redrawing performance;
All have the concept of props, allowing data transfer between components;
All 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 differences with React in this regard, 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 large number of unnecessary vDOM re-renders. This is because Vue uses mutable data, while React places more emphasis on immutable data.
5) Higher-order components
React can be extended through higher-order components (HOC), while Vue needs to be extended through mixins.
Higher-order components are higher-order functions, and React components themselves are pure functions, so higher-order functions are easy for React. On the contrary, Vue.js uses HTML templates to create view components. At this time, templates cannot be effectively compiled, so Vue cannot use HOC to implement.
6) Build tools
Both have their own build tools:
React ==> Create React APP
View ==> view-cli
7) Cross-platform
React ==> React Native
Vue ==> Weex
12. Advantages of Vue
Lightweight framework: only focus on the view layer, it is a set of views to build data, the size is only tens of kb;
Easy to learn: Chinese development, Chinese documents, no language barriers, easy to understand and learn;
Two-way data binding: retains the characteristics of angular, and is simpler in data operation; componentization: retains the advantages of react, realizes the encapsulation and reuse of html, and has unique advantages in building single-page applications;
Separation of view, data, and structure: make data changes easier, without modifying logic codes, and only need to operate data to complete related operations;
Virtual DOM: DOM operation is very performance-intensive, no longer using native DOM operation nodes, which greatly liberates DOM operation, but the specific operation is still DOM but in another way;
Faster running speed: Compared with react, it also operates virtual dom. In terms of performance, vue has great advantages.