What is the difference between vue framework and react framework

Difference: 1. The data in vue is managed in the Vue object by the data attribute, and the data in react is managed by the state attribute; 2. Vue performs nested transmission through slots, and react uses "props. children" method to pass the part within the tag to the child component.

1. The differences between Vue and React frameworks

模板和jsx、状态管理、组件嵌套条件渲染、列表渲染、组件间的通信传值、路由管理

1. Template and jsx

##vue: Vue.js combines html, css, and js together, using their own processing methods, using HTML-based The template syntax allows developers to declaratively bind the DOM to the data of the underlying Vue instance. At its core, Vue.js is a system that allows you to declaratively render data into the DOM using concise template syntax.

react: HTML language is written directly in JavaScript language without any quotation marks. Simply put, this is the syntax of JSX. It Allows mixing of HTML and JavaScript.

2. State management

vue: Data is stored in the Vue object by the data attribute To manage.

react: Data is managed by the state attribute, but the state cannot be changed directly and needs to be updated through setState().

3. Component nesting

vue: Nesting through slots Pass

parent component nested child component wrap

child component wrap

Rendering result

react: Pass the part in the tag to the child component through props.children

Parent component nested child component wrap

Child component wrap

4. 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: Construct a collection of elements in JSX by using {}, and use the map() method to traverse the array.

5. Communication value between components

vue:Parent Passing to children: Bind custom properties through the parent component (or bind dynamic properties through v-bind). The child component explicitly declares props when using the props option so that it can receive the expected data from the parent component.
Pass from child to parent: Bind a custom event through the parent component, and the child component passes 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 listen for events.

Parent component one

Child component one-one

react:Pass from parent to child: pass through props attribute.
Pass from child to parent: The parent component defines events. When the child component triggers the event in the parent component, it communicates by changing the data in the parent component in the form of actual parameters.
Non-parent-child: Non-parent-child components that are not deeply nested can have a common parent component, and redux can be used to share state if the nesting is deep.

Parent component

Child component

6 , Routing management

vue-routeris a global configuration method. Any routing component of vue-router will be rendered to the position.

react-routeris the global component mode, and the react-router subcomponent is passed as children Enter the parent component.

2. The similarities between Vue and React frameworks

Componentization: Both React and Vue encourage splitting your application into components 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.

Companion framework: Both frameworks focus on the UI layer, and other functions such as routing, state management (vuex, redux), etc. are handled by the companion framework.

Building tools: React can use Create React App (CRA), while Vue corresponds to vue-cli.

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial Recommendation: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit:Programming Teaching! !

The above is the detailed content of What is the difference between vue framework and react framework. For more information, please follow other related articles on the PHP Chinese website!