Vue and React have a lot in common:

  1. Both use Virtural DOM
  2. All use the componentization idea, the flow is basically the same
  3. Both are responsive and favor one-way data flow
  4. Both have established communities that support server-side rendering

Vue and React use the Virtual DOM + Diff algorithm. Whether it’s Vue template + options API, React Class or Function, the bottom layer is to generate the render Function. The render function executes to return a VNode (a virtual DOM data structure, essentially a tree). When each UI update, it will always regenerate the latest VNode according to render, and then compare it with the old VNode cached before, and then use Diff algorithm (framework core) to update the real DOM (virtual DOM is a JS object structure, also in the JS engine, while the real DOM is in the browser rendering engine, So manipulating the virtual DOM is much less expensive than manipulating the real DOM.

Vue template/ React JSX -> render function -> generate vnodes -> compare old and new VNode diff algorithms when there are changes, and actually update the real DOM.

React is the first VDOM and Vue2.0 introduced VDOM. In my opinion, there are mainly the following points:

  1. Reduce direct DOM manipulation. The framework gives us a way to mask the underlying DOM writing, reduce frequent dom updates, and also make the view data-driven
  2. Make functional UI programming possible (React core idea)
  3. Can be cross-platform and render to platforms other than DOM (web). ReactNative, Weex

The following highlights the differences between the two.

1. Different core ideas

The early positioning of Vue was to lower the barriers to front-end development as much as possible (this was also related to the fact that Vue authors were independent developers). So Vue advocates flexibility and ease of use (progressive development experience), data variability, and two-way data binding (dependent collection).

The early slogan of React was Rethinking Best Practices. React, backed by Facebook, never lacked attention and users from the start, and what React wanted to do was to disrupt front-end development in a better way (in fact, it did disrupt front-end development as jquery did). React advocates functional programming (pure components), immutable data, and one-way data flow. The biggest benefits of functional programming are stability (no side effects) and testability (same input, same output). React is suitable for large applications.

Due to their different core ideas, Vue and React behave differently (from a development perspective).

1.1 Different core ideas lead to different writing methods

Vue espouses template (easy to understand, easy to understand from the traditional front end), single-file Vue. And although Vue2.0 uses Virtual DOM, which makes Vue can also use JSX (Bebel tool conversion support), Vue officially still recommends template first, which has a certain relationship with Vue’s core idea and positioning.

React advocates JSX, HOC, and All in JS.

1.2 Differences in core ideas lead to differences in API

Vue positioning is simple and easy to use, based on the Template template + Options API, so it is inevitable that there are many concepts and apis. For example, you need to understand concepts and apis such as slot, filter, and directives in the Template template, and watch and computed (dependency collection) in the Options API.

React essentially only has a Virtual DOM + Diff algorithm at its core, so there are very few apis, so you can start developing with setState.

1.3 Differences in core ideas lead to differences in communities

Because Vue definition is simple and easy to use, can quickly solve problems, so many common solutions, Vue official lead the development and maintenance. For example, Vuex state management library, vuE-Router routing library, vuE-CLI scaffolding, Vutur tools, etc. Belong to that kind of overresponsibility, encounter some kind of general problem, only need to use the official solution.

React only focuses on the bottom layer, and the upper layer application solutions are basically not involved. Even the most basic state management is only the idea of flow one-way data flow in the early stage, which is mostly left to the community to solve. For example, there are redux, MOBx, Redux-Sage, DVA, and a whole bunch of other libraries, so the React community thrives. At the same time, the React team had more time to focus on low-level upgrades because there was a community working on upper-level application solutions, such as switching the underlying architecture to Fiber for nearly two years and creating React Hooks to replace HOC. For more frame design ideas, see Yuxi – seeking balance in frame design.

1.4 Different core ideas lead to different upgrading directions in the future

The core idea of Vue and React is different, which determines the basic disk of Vue and React.

Vue will continue to position itself as easy to use (incremental development) and will continue to consider data variability through reliance on collection. This can be seen from the Vue3 core update: the template syntax is basically unchanged, the Options API only adds the Setup composition API, and Proxy based data is variable. For more detailed updates of Vue3, please see the author’s summary of Vue3 design ideas or Yuxi – talk about vue. js 3.0 Beta official live.

React functional programming is the basic drive that won’t change. React’s core idea is to use the UI as a Basic Type, such as String or Array, and then render it into another value (pure function). As you can see from the React Hooks, the React team is working on component functional programming (pure components, no class components) with minimal side effects (reduce this, this causes side effects).

2. Different component implementations

Vue source code implementation is to mount the options to the Vue core class, and then new Vue({options}) to get the instance (Vue component script export is a pure object full of options). So this in the Options API refers to an internal Vue instance and is not transparent to the user, so documentation is required for the this.slot, this.slot, this.slot, this. XXX apis. In addition, Vue plug-ins are built on top of the Vue prototype class, which is why Vue plug-ins use vue. install, to ensure that the Vue of the third-party library is the same as the Vue object of the current application.

React internal implementation is relatively simple, directly define the render function to generate vNodes, while React internal uses four component classes to package VNodes, different types of vNodes using corresponding component classes, clear division of responsibilities (the Diff algorithm is also very clear). React components are derived from the React.component.this refers to the user – defined class and is transparent to the user.

3. The principle of response is different

This problem online has many excellent articles have been explained in detail, here will not be specifically expanded, Vue3 responsive principle interested in the author can see Vue3 responsive principle (Vue2 and Vue3 responsive principle is basically the same, are based on dependency collection, the difference is that Vue3 uses Proxy).

Vue

  • Vue relies on collection and automatic optimization, data is variable.
  • Vue recursively listens for all attributes of data and modifies them directly.
  • When data changes, reference components are automatically found and re-rendered.

React

  • React is manually optimized based on the state machine, data is immutable, setState is required to drive the new State to replace the old State.
  • When the data changes, the component is the root directory and all is rerendered by default

4. Diff algorithm is different

Both are similar in process thinking, both are based on two assumptions (which reduce the algorithm complexity to O(n)) :

  1. Different components produce different DOM structures. When the types are different, the corresponding DOM operation destroys the old DOM and creates a new DOM.
  2. A group of child nodes at the same level can be distinguished by a unique key.

But there are differences in the implementation of the source code:

Vue is based on the SNabbDOM library, which has a good speed and module mechanism. Vue Diff uses bidirectional Pointers to compare and update the DOM.

React mainly uses the DIff queue to store the DOM to be updated, obtain the patch tree, and then update the DOM in batches in a unified operation.

5. Different event mechanisms

Vue

  • Vue native events use standard Web events
  • Vue component custom event mechanism is the basis of parent-child component communication
  • Vue makes good use of the snabbDOM library module plug-ins

React

  • React native events are wrapped, all events bubble up to the top level of the Document listening, and then compose event delivery here. Based on this, you can use the event mechanism across ends rather than being strongly bound to the Web DOM.
  • The React component has no events. Parent and child components communicate with each other using props

Vue and React source flow charts

Vue overall flow chart

React Overall flow chart

Finally, it is advertising time for the department. If you are interested in netease Hangzhou Research Institute, you can send your resume to my email [email protected] and push it directly.