Vue.js advantages compared to React.js

Vue.js's introduction

Vue.js is a JavaScript MVVM library that is built on the idea of data-driven and component-based. We usually use JS to operate the dom,vue.js is using the data binding driver to manipulate the DOM, that is, after creating a binding between the view and model, when the model data layer changes, the view of the DOM will be changed accordingly.

MVVM, which is the interface between Model-view-viewmodel,model and view, is implemented through ViewModel. ViewModel is to create a Vue instance that acts on a DOM element.

DOM listeners and data bindings are key to implementing two-way binding.
From the view layer, the DOM listeners tool in ViewModel helps us to monitor the changes of DOM elements on the page and, if any, changes the data in the model;
From the model layer, the data bindings tool helps us update the DOM elements in the page as we update the model.

Its advantages over the React framework

Similarities between the react and Vue:

1. Using the virtual DOM

2. Responsive and modular view components available

3. Focus on the core library, with the accompanying Routing and Libraries responsible for handling global state management

Where to compare:

#性能方面

1. Rendering Performance

When rendering the user interface, the DOM operates at the highest cost, which, in order to minimize the manipulation of the DOM, Vue and react use virtual DOM to do this, but Vue's virtual DOM implementation (a trap fork) weighs much less, Therefore, the introduction overhead is less than the react.

Vue and React also provide functional components, which are not declared, are not instantiated, and therefore cost less. When these are used for critical performance scenarios, Vue will be faster.

2. Update performance

In react, when the state of a component changes, it causes the entire component's subtree to be re-rendered, starting at the root of the component. To avoid unnecessary re-rendering of subcomponents, you need to use shouldcomponentupdate at any time, and use immutable data structures. In vue, a component's dependencies are automatically tracked during its rendering, so the system knows exactly which components actually need to be re-rendered. This means that in terms of updates, Vue is faster than react

3. In development

In development, Vue processes up to 10 frames per second, while React processes up to 1 frames per second. This is because React has a lot of checking mechanisms, which gives it a lot of useful warning and error messages. Vue also pays more attention to performance when implementing these checks.

#HTML & CSS

In react, both HTML and CSS are written in JavaScript, and all component rendering needs to rely on JSX. JSX is a syntactic sugar that uses XML syntax to write JavaScript

JSX's rendering capabilities have the following advantages:

(1) You can use the full programming language JavaScript to implement your view interface

(2) tool support for JSX is more advanced than existing Vue templates available (for example, linting, type checking, editor autocomplete)

In Vue, we also provide rendering capabilities and support for JSX because of the occasional need for these features. However, for most components, rendering is not recommended for use with the

Vue provides a template for writing in HTML, with the following advantages:

• In the process of writing a template, the style style has been defined and involves fewer functional implementations.
• The template will always be declared.
• Any HTML syntax in the template is valid.
• Read more in English (for example, for each item in items).
• No need for advanced version of JavaScript syntax to increase readability

Component scopes for CSS

Unless you distribute components across multiple files (for example, CSS Modules), a warning is generated for CSS within the scope of React. Very simple CSS can also work, but slightly more complex, such as hover state, media queries, Pseudo-class selectors, etc. are either re-used by heavy dependencies or directly unavailable.

And Vue gives you full access to CSS in every single file component.

<style scoped>@Media (min-width: 250px) {. List-container : hover { background:orange;}} </style>

This optional scoped attribute automatically adds a unique property (for example data-v-21e5b78 ) to the CSS within the component to specify the scope, compile the time .list-container:hover will be compiled similar .list-container[data-v-21e5b78]:hover .

#规模

Scale up

Vue's routing library and state management library are all supported by official maintenance and updated with the core library

React chose to give these issues to the community for maintenance, thus creating a more decentralized ecosystem. But relative, React's ecosystem is more prosperous than Vue.

Finally, Vue offers VUE-CLI scaffolding, which allows you to build projects very easily, including Webpack, browserify, and even no build system. React also provides create-react-app in this regard, but there are some limitations:

• It does not allow any configuration when the project is built, and Vue supports yeoman-like customization.
• It only provides a single template for building single-page applications, and Vue provides templates for a variety of purposes.
• It is not possible to build projects with user-built templates, and self-built templates are particularly useful for pre-established protocols in an enterprise environment.

Scale down

React learning requires you to know that JSX and Es2015,vue are easier to use, just refer to <script src= "Https://unpkg.com/vue/dist/vue.js" ></script> Can be used, the production environment is replaced by the Min version of the

See Vue.js official website when the record: Original link: http://cn.vuejs.org/v2/guide/comparison.html

Vue.js advantages compared to React.js