Performance optimization

In React, when the state of a component changes, it rerenders the entire component subtree with that component as the root.

To avoid unnecessary rerendering of child components, you need to use PureComponent wherever possible or implement the shouldComponentUpdate method manually. You may also 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 render 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 result in imperceptible inconsistencies in rendering results. This makes component optimization in React a considerable mental burden.

In Vue applications, component dependencies are automatically tracked during rendering, so the system knows exactly which components really need to be rerendered. You can assume that each component already has a shouldComponentUpdate automatically, and there is no subtree problem limitation mentioned above.

This feature of Vue eliminates the need for such optimizations and allows developers to focus on the application itself.

HTML & CSS

In React, everything is JavaScript. Not only can HTML be expressed in JSX, but the trend is to incorporate CSS into JavaScript as well. The whole idea of Vue is to embrace and extend classic Web technologies.

JSX vs Templates

In React, all components rely on JSX for rendering. JSX can use the full programming language JavaScript functionality to build your view pages. For example, you can use temporary variables, JS flow control, and reference values directly from the current JS scope. Vue also supports JSX, but templates are still recommended by default. Components can be divided into two categories: presentational and logical. Vue recommends using templates in the former and JSX or rendering functions in the latter. The ratio of these two types of components varies depending on the type of application, but overall the Vue project has far more presentation components than logical components.

Component scoped CSS

Unless you have components distributed across multiple files (such as CSS Modules), the CSS scope in React is implemented using csS-in-JS schemes (such as Styled components and emotion). The main difference between React and Vue is that the default way Vue sets styles is with style-like tags in single-file components. Single-file components give you full 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>
Copy the code

This optional scoped attribute automatically adds a unique attribute (such as data-V-21e5b78) to specify the scope for the CSS within the component. List-container :hover is compiled to something like. List-container [data-V-21e5b78]:hover.

The size of the

Vue’s routing library and state management library are supported by official maintenance and updated synchronously with the core library. React chose to leave these issues to the community to maintain, thus creating a more decentralized ecosystem. But React’s ecosystem is more robust than Vue’s.

React has a steep learning curve, and you need to know JSX and ES2015 before you can learn React, because many examples use these syntax. Vue doesn’t need to learn JSX, ES2015 to get started, so developers can build simple applications in less than a day reading the guidelines.

The frame size

React is slightly larger than Vue.

The diff algorithm

Diff algorithms are different. For details, see the React, Vue2, and Vue3 DIFF algorithms