What are the advantages and disadvantages of vue? Why use it?

The advantages and disadvantages are: simple, fast, powerful, and module-friendly; but it does not support IE8 and is not friendly to search engines, which will affect SEO. Reasons for use: Vue is a tool that can reduce development costs and improve development efficiency. It can help developers free themselves from tedious DOM operations; after setting the correct view and data rules during development, you only need to focus on the data Changes, the view content will change accordingly, and there is no need to manually manipulate the DOM elements to modify it. And Vue’s componentization is very helpful in improving code reuse and dismantling large projects.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

What is Vue?

Vue (pronounced /vjuː/, similar to view) is a JavaScript framework for building user interfaces. It is built on standard HTML, CSS, and JavaScript, and provides a declarative, component-based programming model to help you develop user interfaces efficiently. Whether it’s a simple or complex interface, Vue can do it all.

The following is a basic example:

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

Result display

The above example shows two core functions of Vue:

• Declarative Rendering: Vue has expanded a set of template syntax based on standard HTML, allowing us to declaratively describe the relationship between the final output HTML and JavaScript states. relation.

• Responsiveness: Vue automatically tracks JavaScript state and responsively updates the DOM when it changes.

Advantages and disadvantages of Vue.js

Advantages:

1. Simple: The official documentation is very clear and easier to learn than Angular.

2. Fast: Update DOM in asynchronous batch processing.

3. Composition: Compose your application with decoupled, reusable components.

4. Compact: ~18kb min gzip, and no dependencies.

5. Powerful: Expression & computed properties without declaring dependencies.

6. Module-friendly: It can be installed through NPM, Bower or Duo. It does not force all your code to follow Angular's various regulations, and the usage scenarios are more flexible.

Disadvantages:

• Does not support IE8.

  Vue.js does not support IE8 and below because Vue.js uses ECMAScript 5 features that IE8 cannot emulate. Vue.js supports all ECMAScript 5-compatible browsers.

• vue is a single-page page, which is not friendly to search engines and affects SEO. Therefore, it is not suitable for the company's official website. For example, the paths of two Vue routes (pages) are as follows: index.html#aaa and index.html#bbb, but to search engines, they are both the same page, which is index.html. In this way, search engines will not be able to include your page.

Why use Vue.js

Using any new frameworks and libraries is actually to solve our current development The problems encountered may improve its development efficiency. Everyone’s cost is time, and good tools can help us save time. From a project perspective, it also helps us save costs. Vue.js is a tool that can reduce development costs and improve development efficiency. It can help us free ourselves from tedious DOM operations. During development, after we set the rules for the correct view and data, we only need to pay attention to changes in the data, and the content on the view will change accordingly, without the need for us to manually manipulate DOM elements to modify them.

In addition, the front-end development model has gradually begun to shift towards componentization, and the concept of Web Components has gradually become a standard. It has its own independent HTML fragments, JS files and CSS styles, so that it can be used without Worry about the impact on your own business code. Vue.js has also implemented its own implementation of this concept, which is very helpful for improving code reuse and dismantling large projects.

Some benefits of vue:

1. The control is automatically bound to the data. When submitting the form to the background, you can directly use the data value in the data instead of You need to use the $("#id") method to get the value of the control. It is much more convenient to assign values ​​to the control. You only need to change the value of data, and the control will automatically change the value. Convert complex interface operations into data operations.

For example, the following piece of code can realize dynamic management of the list in the select control:

html code:

<el-select v-model="mType" style="flex: 1;">
　　<el-option v-for="(item,index) in enums" :label="item.label" :value="item.value" :key="index"></el-option>
</el-select>

js code:

data(){
    return{
　　　　mType:'',
　　　　enums:[{value:0,label:'未婚'},{value:1,label:'已婚'}]
　　}
}

When you need to modify the contents of the select list, you no longer need to operate the dom, you only need to simply change the value of enums. When the value selected by the control changes, it will be automatically bound to the mType field of data.

2. Page value transfer and status management

There are many methods to choose from in vue's page value transfer, such as using sub-component attributes to transfer values, such as using the page url parameter method to transfer values, or using the vuex global state management method to transfer page values, etc. In native development, when the page has multiple parameters, page value transfer and initialization are much more complicated. Vue, on the other hand, stores the parameters directly in the object, and just stores an object directly for the properties of the subcomponent or vuex.

3. Modular development, modular update

As mentioned in the second point, it can actually be extended to modular development. For example, a list page has adding functions and modifying functions. At this time, we can modify the data of the main component by referencing the sub-component when the content of the sub-component is updated. For example, after modifying a piece of data, we need to modify the main component at the same time. Refresh, but we don't want to change the page number and search conditions of the original list page. If you use native development to implement this, you need to write a lot of business logic to save parameters such as the search conditions and page numbers of the previous page, but if you develop with Vue, it will become very simple.

4. Code readability

Vue is inherently capable of component development, so different functions are basically written in different modules, so the readability of the code is very high. When a novice takes over an old project, he can basically locate the code to be modified and make modifications in one or two days.

5. Based on the powerful nodejs, add a new component library, which can be installed with a basic npm command. For example, when I need to use the axios component, I can directly install it with npm install axios, and then I can use the axios component. . Students who are familiar with maven can easily understand the npm tool.

6. The method of main routing, sub-routing, main page, and sub-component allows us to completely abandon iframe. Students who have written on the front end all know that due to the scroll bars of iframes and the interactivity between subpages and other pages, the user experience is still far less friendly than a single-page architecture. And using vue is very simple and convenient to implement fixed layouts such as system menus and navigation.

7. CSS modularization: Each component can use the same style name, but have different style attributes. For example, the buttons of component A and component B are both bound to class="btn", but in the two components, we can implement two different btn style attributes without affecting each other.

Related recommendations: vue.js video tutorial

The above is the detailed content of What are the advantages and disadvantages of vue? Why use it?. For more information, please follow other related articles on the PHP Chinese website!