This excerpt is based on article 1: juejin.cn/post/684490…

  1. The underlying compilation principle of both is VDOM+ DIff algorithm
  2. Vue usesVariable dataWhile the ReactMore emphasis on immutable data

1. Different core ideas

  1. Vue is more DSL oriented with templete + Option Api template syntax

  2. React uses all in JS. The biggest benefits of functional programming are stability (no side effects) and testability (same input, same output).

  3. React-hooks replace HOC, move closer to purely functional components, reduce side effects

2. Different component implementations

  1. vue: “Vue component script exports a pure object full of options” -> ‘then new vue ({options}) fetch instance’ -> ‘Options API this points to internal vue instance’ -> ‘Vue plugins are built on top of the Vue prototype class. This is why Vue plugins use vue. install, to ensure that the Vue of the third-party library is the same as the Vue object of the current application. ‘

  2. React: ‘React uses four component classes wrapped inside vNodes’ -> ‘Different types of vNodes use the corresponding component classes’ -> ‘React components are all derived from the react.componentclass, whose this refers to the user defined class’

  3. Data flow is different:

  1. Vue 2.x: Bidirectional binding between components <–> DOM

  2. React has always advocated one-way data flow

  3. State management frameworks such as Vuex and Redux are used to manage one-way data flows and are less sensitive to data flows within components

3, the principle of response is different

  1. Vue: VUE dependency collection, automatic optimization, data mutable (Getter /setter of Object.definedPrototype()) -> Recursively listens for all attributes of data -> automatically finds reference components to re-render when data changes

  2. React: React is based on the State machine, manually optimized, data immutable, requires setState to drive the new State to replace the old State -> When the data changes, components as the root directory, default to all re-render

4. Diff algorithm is different

With:

  1. Different components produce different DOM structures

  2. A group of child nodes at the same level can be distinguished by a unique key

Different:

  1. Vue: Based on the SNabbDOM library -> Vue Diff uses bidirectional Pointers to compare and update the DOM

  2. React: Mainly use diff queue to save the DOM to be updated, obtain patch tree, and update DOM in batches in a unified operation

5. Different event mechanisms

vue:

  1. Native events Native events that use web standards

  2. A custom set of event mechanisms for master and child component data transfer communication infrastructure

  3. Reasonable use of the SNabbDOM library module plug-in

react:

  1. Native events are wrapped, and all events bubble up to the top layer of document listening, where they are synthesized for event delivery.

  2. There are no events on the React component. Parent and child components communicate using props(based on the core principles of functional components)