1. The similarities between Vue and React
Componentization: Both React and Vue encourage you to split your application into modules with clear functions. Such componentization makes the structure clear and easy to reuse.
Virtual Dom: In order to render pages efficiently and reduce performance consumption, Virtual Dom is adopted.
Supporting framework: Both frameworks focus on the UI layer, and other functions such as routing and state management (vuex, redux) are handled by the companion framework.
Build tool: React can use Create React App (CRA), while Vue corresponds to vue-cli.
Second, the difference between Vue and React
1. Templates and
jsx vue: Vue.js combines html, css, and js together, using their own processing methods, using HTML-based template syntax, allowing developers to declaratively convert the DOM Data bound to the underlying Vue instance. The core of Vue.js is a system that allows you to use concise template syntax to declaratively render data into the DOM.
react: HTML language is written directly in JavaScript language without any quotation marks. Simply put, this is the grammar of JSX, which allows mixing of HTML and JavaScript.
2. State management
vue: data is managed in the Vue object by the data attribute.
react: The data is managed by the state property, but the state of the state cannot be changed directly, and it needs to be updated through setState().
3. Component nesting
vue: nesting and passing through the slot slot
react: passing the part of the label to the child component through props.children
props.children
https://blog.csdn.net/u012372720/article/details/94000150
Three, conditional rendering and list rendering
Vue conditional rendering: v-if, v-show conditional rendering of a set of numbers.
Vue list rendering: v-for a set of numbers for list rendering.
React conditional rendering: Use logical operations && || and ternary operators to create elements that represent the current state.
React list rendering: Build a collection of elements in JSX by using {}, and traverse the array using the map() method.
4. Communication between components
1. vue:
parent to child: bind custom properties through the parent component (or bind dynamic properties through v-bind), and explicitly declare props when the child component uses the props option, so that it The desired data can be received from the parent component.
Passing from child to parent: Binding a custom event through the parent component, and the child component passing the value through this.emit('custom event', value).
Non-parent-child: You can use an empty Vue instance to bind to the prototype of the Vue instance as an event bus center (vue.prototype.eventBus = new Vue()), use emit to trigger events, and on to monitor events.
Communication within several components of vue: parent to child, child to parent, vuex, event's emit and on
https://www.cnblogs.com/fundebug/p/10884896.html
2、react：
Communication within several components of react: parent to child, child to parent, context context, redux, event subscription
https://www.jianshu.com/p/fb915d9c99c4
context context: https://www.cnblogs.com/qiqi715 /p/10414229.html
Five, routing management
react routing
https://segmentfault.com/a/1190000019790930
Vue's routing management is embedded in
Six, one-way binding vs two-way binding
1. React:
In React, the data flow is also transmitted in a single item. The parent component passes the value to the child component, but the child component cannot modify the value of the parent component. (Think about it, the value of the parent component may not only be used for this child component. Once it can be modified, all components that use the changed data will change. Then who changed the data?) The child component wants to modify the parent The value of the component can only be passed to the parent component by calling the method passed by the parent component, so that the parent component can modify it.
2.
Vue : Vue supports one-way binding and two-way binding.
One-way binding: interpolation form {
{data}}, v-bind is also one-way binding.
Two-way binding: form v-model, the user's changes to the view layer will be directly synchronized to the model layer. (Actually v-model is just syntactic sugar for v-bind:value and v-on:input)
Seven, the framework is essentially different.
Vue is a way to achieve the MVVM model. But it does not fully follow the MVVM model.
React is a front-end componentized framework, a strict view layer, MVC mode. Developed from back-end componentization.
First understand what mvvm means. vm means view mode. Therefore, the mvvm framework needs a vm object to map the view. That is, when the attributes of the vm object change, the corresponding view part will be updated accordingly. Knockoutjs is the more classic. The key concepts are view model, compute, view template, etc. Yes, there are actually a lot of its shadows in Vue. Then let's take a look at react. It does not have a vm object in the pure sense, it has properties and states. Use attributes and states to map views. So what is the difference between attributes and status and vm? I personally think that vm objects are treated the same regardless of whether your value is passed in from the outside or defined inside. In many cases, there is a two-way binding mechanism. Maybe the early flex is amazing, and the later mvvm framework has the concept of two-way binding. And react emphasizes the immutability of attributes and one-way data flow. The internal state is controlled internally. Such a design may be more complicated in design, but it has become more certain and clearer in use. If you are familiar with React, manage the appropriate state for the appropriate component, and do a reasonable layering of the state, which will greatly reduce the complexity of the application. Then, redux has a very advanced concept called container components and pure display components. If you understand this design idea, you can concentrate complex things into a small number of components, and most of the components will become pure display components, further reducing the complexity of the application. Sex.
Eight, state management
The state in the application is a key concept in React. There are also some supporting frameworks designed to manage a large state object, such as Redux. The state object is immutable in a react application, and you need to use the setState() method to update the state. In Vue, the state object is not necessary, and the data is managed in the Vue object by the data attribute.
In Vue, the state object is not necessary. The data is managed in the Vue object by the data attribute, and there is no need to use methods such as setState() to change its state. In the Vue object, the data parameter is the application. The keeper of the data.
9. Performance optimization
In React, when the component state changes (after setState), it will trigger the re-rendering of the entire number of sub-components, using the root component as the rendering base point. In order to avoid unnecessary re-rendering of child components, you need to use PureComponent or implement shouldComponentUpdate.
In Vue, when the vue component is initialized, the corresponding Wather is established for each data attribute through Object.defineProperty, and then the dependencies are collected when the template is compiled. In the future, as long as any attribute of data is modified, the re-rendering of the view will be triggered, and the corresponding vdom will be accurately modified. This eliminates the need for developers to optimize the overall performance, allowing them to focus more on building the application itself.
In short, the performance optimization of react needs to be done manually, and the performance optimization of vue is automatic, but the responsive mechanism of vue also has a problem, that is, when there is a lot of state, there will be a lot of watchers, which will cause lag, so large applications (Particularly in many states) React is generally used, which is more controllable.