Vue is different from React

The main difference

The main idea

The central idea of VUE is the HTML + CSS + JS model,
React is functional and uses JSX, or all in JS

Principle of Monitoring data

Vue is aware of changes to data through data hijacking
React is a way of comparing data

The data flow

Vue is one-way from Parent to Child and bidirectional from DOM to View, so it has some advantages when dealing with forms
React is a completely one-way data flow and handles forms with some higher-order components

template

Reacct is rendering templates through JSX
Vue is rendered using an extended HTML syntax

State management

In VUex, store is directly injected into the component instance
In REdux, connect props to Dispatch

Life cycle event handling

Vue is still a native event, just wrapped
React synthesis event

The implementation principle of monitoring data changes is different

Vue hijacks data according to bidirectional data binding, updates corresponding DOM when the data changes, data precision, and has a relatively good performance. React is full amount through data contrast, as long as there is data changes will be updated, can cause a lot of unnecessary vDom rendered, need to use PureComponent/shouldComponentUpdate optimization

The life cycle

react

Hoc and mixins

Mixins are too intrusive of components, and higher-order components add redundant node nesting. The React component is a function that supports higher-order components, while vue is a wrapped pair function, so React supports hoc. The Vue component automatically does a lot of things for us, binding this, so hoc compatibility is poor.

Template rendering

The React component is in JS code and supports various JS syntax (conditions, loops, etc.), render supports closure pairs, and the component can be used directly after import. The vUE component template is separated from JS, and implements conditions, loops, and events through a large number of directives. Since the vue template uses data that must be mounted on this, we must declare components in components after we import them.

Vuex is different from Redux

Redux advocates immutable data and compares differences through DIff (replacing old data with new data). It can only dispatch actions and cannot directly call Reducer and read data through connect

Vuex advocates variable data, keeping track of data pairs by internally creating a VUE instance (two-way data binding), committing updates using Dispatch and COMMIT (directly modifying the data in mutation), and reading data via mapState or this.$store

Vue is different from React