preface
Frame comparisons are a cliche, but the debate over whether salty or sweet tofu tastes good isn’t really healthy (kids argue, adults applaud, of course). I always feel that every framework that has been recognized by developers and become popular has its own advantages and disadvantages, which lies in users’ usage scenarios and experience, especially after the recent system contact with React. That’s what technology is, it’s always iterating and replacing. React (Lit up, guys), with the cry of “Rethinking Best Practices”, really made a breakthrough in terms of development model, and Vue, as an indie developer, is also cool. No more nonsense, three in a row for respect. (Photo from Internet)
structure
Vue structure diagram click here
The framework of philosophy
In fact, it compares the similarities and differences in the core ideas of some frameworks. Why is philosophy called such a fancy name? As the mainstream front-end development framework, they have a lot in common in the design idea:
- Modular organization is advocated, with pages divided by components
- Both use one-way data flow to emphasize clear and controllable data flow
- Abandon tedious DOM operations and be data-driven
- Virtual DOM
- Vue3 adds composition API to emphasize separation and composition of logical concerns, while React provides Hooks
- .
They both provide a convenient implementation for many development activities such as componentization, data management, etc., which will be compared in detail later, from these aspects can be clearly seen:
- Vue focuses more on the separation of structure (Html), logic (JS), and presentation (CSS), so. Vue files come naturally. React’s emphasis on “all in JS “argues that rendering logic is intrinsically coupled with other UI logic, giving rise to JSX.
- Vue advocates template syntax and has many instructions to implement various functions. React these functions are implemented in JS (or JSX).
- Vue provides a lot of options API, with template syntax convenient and fast implementation of interactive UI (of course, this is also one of the reasons why it is criticized too much dialect, especially large words, use comfortable). React is implemented with JS, which is more native and often more flexible (“all in JS “,again).
- .
Hook VS composition API
One of the biggest changes to Vue3 is the addition of the Composition API, which made you cry in the bathroom after trying it. Great for obsessive-compulsive people (who can’t read more than 200 lines of code, but are obsessed with Mixins), it provides a new way to organize code. Soon, there was a composition API that copied from React Hooks. After reading both, I found that they had a lot in common (for example, the vue website uses the name useXXX for the composite API example, React custom Hook at first glance, but it is very barbaric to be labeled as plagiarism. It is quite normal for the open source world to learn from each other. When a new mode emerges, it is worth learning from and learning from each other, so as to better promote the development and progress of technology.
motivation
What’s interesting is that the motivation behind React and React is the same. Here’s a quote from the section on Hook motivation on the React website:
- Reusing state logic between components is difficult
- Complex components become difficult to understand
It is difficult to reuse state logic between components:
By creating components, we can extract the repetitive parts of the interface, along with their functionality, into reusable snippet of code. This alone will take our application a long way in terms of maintainability and flexibility.
Both component systems can abstract and reuse functional modules, but both lack a better solution to aggregate logic concerns (known as state logic in React).
- Vue: Prior to composition, vue’s Options API caused the same piece of logic to be scattered among components’ options, such as data, Watch, Methods, and lifecycle hooks, which made it necessary to repeatedly jump through and write this piece of code. It’s not that there are no solutions, such as mixins, but there are a number of drawbacks (check this out for yourself).
- React: Similarly to the above situation, ‘React does not provide a way to ‘attach’ reusability behavior to components’, the same piece of state logic may be scattered across various parts of a component (such as the lifecycle), React solutions prior to Hooks are Render props and higher-order components. But they all have their drawbacks.
Complex components become difficult to understand: The state logic between components is difficult to reuse, which naturally leads to many complex components that are difficult to understand. Complex components are often scattered with different state logic, which is not suitable for extracting individual components separately. This is also the origin of many evil large files.
usage
(Refer to the official website and the above structure chart for detailed usage)
- Vue: Added a Setup () lifecycle hook to use some of the new Vue apis.
- React: “hook” features like React state and lifecycle into function components. You can also customize hooks to reuse state logic between different components.
The UI rendering
The template
- Vue: Promotes separation of structure, logic, and presentation, using its own template syntax. DOM structures can be written under.vue, in the Template option of the instance object (component), or dynamically generated using JSX. Personally, I prefer the Vue template, which is closer to the original DOM structure.
- React: Using JSX, ‘implements a browser-independent DOM system with performance and cross-browser compatibility’.
The list of rendering
- Vue: Normally done in a template using the V-for command, but can also be rendered dynamically using JSX.
- React: Render in JSX using array.prototype.map () or map/forEach on React.Children
Conditions apply colours to a drawing
- Vue: template syntax V-if, JSX is also available.
- React: Use element variables; JSX uses conditional expressions (such as &&, ternary operators).
slot
- Vue: built-in Slot component, with named Slot, scope Slot.
- React: use props. Children.
style
- Vue: used in. Vue files as independent modules. Scoped, deep, global and other pseudo-classes are supported to define scopes. Inline style is the same as Html.
- React: Optional CSS Modules are supported. The inline style follows the React DOM system and assigns a value to the style property, which is usually a JS object.
innerHTML
- Vue: instruction V-html, V-text.
- React: The dangerouslySetInnerHTML property of the DOM system in React.
Asynchronous components
- Vue.defineasynccomponent () allows you to define asynchronous components as factory functions. Vue3 uses vue.defineasyncComponent () to explicitly define asynchronous components.
- React: Use React. Lazy () to define a lazy-loaded component.
suspense
- Vue: Built-in Suspense components.
- Suspense: React.Suspense class.
Suspense allows components to “wait” for some action to finish before rendering. This is especially useful for scenarios such as on-demand loading, server-side rendering, loading, and so on. Both Vue and React can create asynchronous components to work with each other (see Section 5.7).
fragment
- Vue: a new feature in Vue3, template can support multiple root tags (previously supported only one). This raises the question of how multiple root nodes inherit component Attributes. Vue3’s solution is to use $attr to dynamically bind to the root node that needs to inherit Attributes
- React: react. Fragment class, supports multiple root nodes, can be short <>
DOM portal
- Vue: Use the built-in component Teleport.
- React: Use reactdom. createPortal(child, container).
Virtual DOM
Yuxi’s elaboration on Virtual DOM
Data management
Render data
- Vue: props and data. A one-way data flow passed down as props. Provide v-model directives (props, syntax-sugar for event $emit) to implement bidirectional binding.
- React: props and state. A one-way data flow passed down as props. You need to add the reverse data flow yourself.
responsiveness
- Vue: Use computed and watch options for responsiveness, and use computed(), watch(), and watchEffect() methods in composition API. (Please refer to the official website for details)
- React: Use Hook: useMemo(), useCallback().
Both computed and useMemo return computed values that depend on some value. Computed automatically collects all the values that you depend on, and useMemo needs to be specified in the parameter.
component
Organizational form
- Vue: Divided into functional components (stateless) and stateful components. The function component Vue2 uses optional declaration creation, while Vue3 supports function creation (details).
- React: Divides into function components (also known as stateless components before hooks) and class components. Created using functions and ES6’s class syntax, respectively.
It is not difficult to see from the above, in fact, the two component models are very similar. Can be divided into stateless components and stateful components; Both support asynchronous components; Inheritance is not recommended, but a composite approach to organizing components…… Having a very similar component model leads to some of the same problems. Similar hooks and composition APIS were created as mentioned earlier. Vue believes that separation of concerns is not equal to separation of file types. Organize CSS, JS, and HTML into loosely coupled components using a single file (.vue). It must work with vue-loader.
The life cycle
Here the official website is more detailed, here do not do too much redundant. Vue Component life cycle React Component life cycle Both provide hook functions for controlling rendering and logical processing during component initialization, creation, mounting, update, and destruction. Both also provide hooks for handling error situations (see the structure diagram above or the official website).
Component communication
- Vue:
Props pass down; Event emit is passed up; Cross-component Provider/Inject; The event bus.
- React:
Props pass down; Event emit is passed up; Delivery across components using useContext.
The event processing
- Vue: Use the directive V-on binding in the template to provide event modifiers for different event types. Returns the native event object.
- React: pass the SyntheticEvent object –SyntheticEvent instance — to the event handler. It is a wrapper around the browser’s native event and has the same interface as the browser’s native event. And it’s cross-browser. Native events are stored in the nativeEvent property of the SyntheticEvent instance.
conclusion
In this paper, Vue and React are compared and sorted out in terms of ideology and grammar. The content involved is relatively superficial. With the in-depth use and practice of React, I believe there will be many different understandings. The article will be updated in the future, and the React principle, ecology (such as Router, Redux, etc.) and Vue comparison will be gradually supplemented.