When to use vue.js

Using vue.js: 1. If you need to use templates to build applications, then please choose Vue; 2. If you need something simple that can work normally, then please choose Vue; 3. If you need to update the program Smaller and faster, then choose Vue.

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6. This method is suitable for all brands of computers.

[Related article recommendations: vue.js]

Using vue.js:

If If you want a lightweight, faster and more modern UI library to make a first-class SPA (Single Page Application), you should choose Vue.js. This is advantageous for developers who are used to working with HTML. Additionally, it provides reusability of components, making it an option for developers to build an unparalleled user experience in web applications.

1. If you like to use templates (or need some of the options) to build applications, then choose Vue

Putting the markup in the HTML file is Vue The application's default options. Similar to Angular, curly braces are used for data binding expressions and directives (special HTML attributes) are used to add functionality to the template. Below is a simple Vue program example. It can output a message, with a button to dynamically reverse the message:

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
  el: &#39;#app&#39;,
  data: {    message: &#39;Hello Vue.js!
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
});

In contrast, React applications eschew templates and require developers to create the DOM in JavaScript, often assisted by JSX, below Use React to achieve the same function:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello React.js!'
    };
  }
  reverseMessage() {
    this.setState({ 
      message: this.state.message.split('').reverse().join('') 
    });
  }
  render() {
    return (
      <div>
        <p>{this.state.message}</p>
        <button onClick={() => this.reverseMessage()}>
          Reverse Message
        </button>
      </div>
    )
  }
}
ReactDOM.render(App, document.getElementById(&#39;app&#39;));

Templates are easier to understand for junior web developers who are learning standards. But there are also many experienced developers who are happy to use templates, because templates can better separate layout and functionality, and they also have the option of using a preprocessor like Pug.

However, using templates requires learning all HTML extension syntax, and the rendering function only needs to understand standard HTML and JavaScript

2. If you like simple ones that can work normally, then Please select Vue

A simple Vue project can run directly in the browser without parsing, which allows Vue to be referenced in the project like jQuery.

While it's technically possible to use React, typical React code leans more toward JSX and ES6 features like classes and non-mulating array methods. But Vue goes deeper in simple design. Let's compare how the two handle an application's data (i.e. "state").

State cannot be changed directly in React. You need to call the setState interface:

this.setState({ 
    message: this.state.message.split('').reverse().join('') 
});

The difference between the current and previous states lets React know when and what to re-render in the DOM, so Immutable state is very necessary.

In contrast, data can be mutated in Vue. It is easier to change the same data attributes in Vue.

// Note that data properties are available as properties of 
// the Vue instance
this.message = this.message.split('').reverse().join('');

Before you conclude that the Vue rendering system is less efficient than React rendering, let’s take a look at state management in Vue: When you add a new object to the state, Vue iterates through all its properties and converted to getters and setters. The Vue system continuously tracks the state and automatically re-renders the DOM when the state changes.

What is impressive is that while state changes in Vue are more concise, the efficiency of the re-rendering system is actually better than that of React.

Vue’s reaction system does have things worth noting. For example: it cannot detect the addition, deletion of attributes and changes to specific arrays. In this case, you can use the React-like set method in the Vue API.

3. If you want your program to be smaller and faster, then please choose Vue

Both React and Vue will build a virtual DOM, and in the application state Synchronously updates the actual DOM when changed. Both have their own optimization methods. Vue core developers have provided a benchmark showing that Vue's rendering system is faster than React's. In this test, a list of 10,000 items was rendered 100 times. The table below shows the results of the comparison.

From a practical perspective, this kind of benchmark is only relevant for edge cases. Most applications don't need to do this very often, so it can't be considered an important factor in comparison.

Although the size of the page is related to the project, Vue has the advantage. The currently released Vue library is only 25.6KB.

To achieve similar functionality with React, you need to use React DOM (37.4KB) and React with Addons library (11.4KB), for a total of 48.8KB, almost twice the size of Vue. To be fair, you get more API with React, but you don't get double the functionality.

Related free learning recommendations: javascript(Video)

The above is the detailed content of When to use vue.js. For more information, please follow other related articles on the PHP Chinese website!