First, similarities

1. Both have componentized development and Virtual DOM 2. Both support props for data communication between parent and child components 3. Both support data-driven views. Instead of directly manipulating the real DOM, update the status data interface automatically. 4. Both support server rendering 5. Both support native solutions, react Native vue weexCopy the code

2. Differences

1. Data binding: VUE implements bi-directional data binding, while React data flow is unidirectional. React recommends JSX, that is, to write all HTML and CSS into JavaScript. Vue recommends webpack+ VUE-Loader to write HTML, CSS, and JS in the same file. In react applications, the state object is immutable, and the setState method is used to update the state. In VUE, the state object is not required. Data is managed by the data property in vUE. Instead of having to re-render the entire component tree, react rerenders the entire component whenever the state of the application changes, React requires shouldComponentUpdate, a lifecycle function, to control react. Vue is MVVM mode 6. The way HoC and mixins vue combine different functions is through mixin React. Component communication in Vue, a parent component transmits data or callback to a child component using props, and a child receives messages from a child component using events to send messages to its parent component. The child gives the parent $emit, and the parent receives the provide/ Inject value added by the @ method name to enable the parent to inject data to the child, which can cross multiple levels. Eventbus https://juejin.cn/post/6974184935804534815 React also has the corresponding three ways: the parent component by props can transfer data to the child components or callback. 8.Vuex vs. Redux On the surface, there are some differences in the way stores are injected and used. In Vuex, $store is injected directly into the component instance, so it can be used flexibly: commit updates with Dispatch or COMMIT, read data via mapState or directly through this.$store. In Redux, we wanted each component to display the props and dispatch with connect. In addition, Vuex is more flexible. Components can dispatch actions and commit updates, while Redux can only dispatch and cannot directly call Reducer for modification. In terms of implementation principles, the biggest differences are two: Redux uses immutable data, whereas Vuex's data is mutable, so Redux replaces old states with new states each time, while Vuex changes them directly. Redux compares data changes through diff, while Vuex compares data changes through getter/setter in the same way as Vue. The difference between React and Vue is due to their different design concepts. React tends to build large, stable applications, and is very disciplined. Vue, by contrast, is more of a quick fix, more flexible, and less rigid. Hence, React is used for large projects and Vue is used for small projects. 9. The implementation principle of monitoring data changes is different. Vue can accurately know data changes through getters/setters and hijacking of some functions. React is done by default by comparing references (DIFF), which if not optimized can result in a lot of unnecessary VDOM re-rendering. Why doesn't React accurately listen for data changes? This is due to the difference in design philosophy between Vue and React. Vue uses mutable data while React emphasizes immutable data. Vue is simpler and React is more robust when building large applications.Copy the code

Vue life cycle

After the instance is initialized, el and data are not initialized, so methods and data on methods, data, computed data, and so on cannot be accessed. 2>created (created) The instance is called after it has been created. In this step, the instance has completed the following configuration: data observation, property and method operations, watch/ Event callback, data initialization, el not. However, the hang phase has not yet started. The $EL attribute is not currently visible, which is a common lifecycle because you can call methods in Methods, change data in data, and changes can be displayed on the page through vUE's reactive binding, get computed properties in computed, and so on. Preprocessing, usually we can for instance here there are some children's shoes like sending ajax requests here, it is worth noting that this cycle is no way to to intercept the instantiation process, so if there are some data must obtain is allowed to enter the page, is not suitable for this method to send the request, It is recommended to do this in the component routing hook beforeRouteEnter 3>beforeMount mount is called before starting, the associated render function is called for the first time (virtual DOM), and the instance is configured as follows: After compiling the template, generate HTML from the data and template in the data, complete the initialization of EL and DATA, notice that the HTML is not hanging on the page at this time. 4> Mounted is executed only once, when the template HTML is rendered to an HTML page. 5> Update is called before data is updated, occurs before the virtual DOM is re-rendered and patched, and state can be further changed in this hook without triggering the additional re-rendering process. When called, the component'S DOM is already updated, so DOM-dependent operations can be performed, and in most cases, you should avoid changing the state in the meantime, as this could cause an infinite update loop, The hook is not called during server-side rendering. 7>beforeDestroy Normally you need to reset this step, such as clearing timer and LISTENING dom events in the component. All event listeners are removed and all subinstances are destroyed. This hook is not called during server-side renderingCopy the code

React Lifecycle

1> Initialization phase:

getDefaultProps: GetInitialState: Gets the initialization state of each instance componentWillMount: Component is about to be loaded and rendered to the page (only triggered once during the entire life cycle)Copy the code

2> Running status:

ComponentWillReceiveProps: component will receive the property call shouldComponentUpdate: component receive the new attributes, or when a new state (can return false, no more new after receiving data, prevent render calls, ComponentWillUpdate: componentis about to update cannot modify properties and state render: componentDidUpdate: Componenthas been updatedCopy the code

3> Destruction Stage:

ComponentWillUnmount: Component is about to be destroyedCopy the code

Two new states

GetDerivedStateFromProps (nextProps prevState) is used to replace componentWillReceiveProps getSnapshotBeforeUpdate (prevProps, PrevState) replaces componentWillUpdateCopy the code