如何使用vue.js

這篇文章主要介紹了什么時候使用vue.js，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

使用vue.js的情況：1、如果需要使用模板構(gòu)建應(yīng)用程序，那么請選擇Vue；2、如果需要簡單的能正常工作的，那么請選擇Vue；3、如果需要程序更小更快，那么請選擇Vue。

使用vue.js的情況：

如果想要一個輕量級，更快速，更現(xiàn)代的UI庫來制作一流的SPA（單頁面應(yīng)用程序），就應(yīng)該選擇Vue.js。 對于習(xí)慣使用HTML的開發(fā)人員來說，這是有利的。此外，它還提供了組件的可重用性，使其成為開發(fā)人員在Web應(yīng)用程序中構(gòu)建無與倫比的用戶體驗的選擇。

1、如果你喜歡使用模板（ 或需要一些其中的選項）構(gòu)建應(yīng)用程序，那么請選擇Vue

將標記放在HTML文件中是Vue應(yīng)用程序的默認選項。與Angular類似，大括號用于數(shù)據(jù)綁定表達式，指令（特殊的HTML屬性）用于向模板添加功能。下面是一個簡單的Vue程序例子。它可以輸出一條消息，有一個按鈕可以動態(tài)反轉(zhuǎn)消息：

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

相比之下，React應(yīng)用程序避開模板，要求開放人員在JavaScript中創(chuàng)建DOM，通常用JSX輔助，下面是用React來實現(xiàn)同樣的功能：

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('app'));

對于學(xué)習(xí)標準的web初級開發(fā)者而言，模板更容易理解。但是也有很多經(jīng)驗豐富的開發(fā)人員樂意使用模板，因為模板可以更好地分離布局和功能，同時也可以選擇向Pug這樣的預(yù)處理器。

但是，使用模板需要學(xué)習(xí)所有的HTML擴展語法，渲染函數(shù)只需要了解標準的HTML和JavaScript

2、如果你喜歡簡單的能正常工作的，那么請選擇Vue

一個簡單的Vue項目可以不需要解析，直接在瀏覽器中運行，這允許Vue可以像jQuery一樣在項目中引用。

雖然在技術(shù)上使用React也是可行的，但是典型的React代碼更傾向于像classes和non-mulating 數(shù)組方法這樣的JSX和ES6的特性。但是Vue在簡潔設(shè)計方面更為深入。我們來比較兩者如何處理應(yīng)用程序的數(shù)據(jù)（即“狀態(tài)”）。

在React中State是不可以直接改變的，需要調(diào)用setState接口：

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

當(dāng)前和之前的狀態(tài)差異讓React知道什么時候在DOM中重新渲染以及渲染什么，因此不可變的狀態(tài)是非常必要的。

相比之下，數(shù)據(jù)可以在Vue中突變。相同的數(shù)據(jù)屬性在Vue中發(fā)生變化更為簡單。

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

在你得出Vue渲染系統(tǒng)比React渲染低效的結(jié)論之前，讓我們來看看Vue中的狀態(tài)管理：當(dāng)你向狀態(tài)添加新對象時，Vue會遍歷它的所有屬性并且轉(zhuǎn)換為getter和setter。Vue系統(tǒng)會持續(xù)追蹤狀態(tài)并且在狀態(tài)發(fā)生變化時，自動重新渲染DOM。

令人印象深刻的是，Vue中的狀態(tài)改變更為簡潔的同時，重新渲染系統(tǒng)的效率其實比React更好。

Vue的反應(yīng)系統(tǒng)確實有值得注意的事項。例如：它不能檢測到屬性的添加、刪除以及特定數(shù)組的變化。在這種情況下，可以使用Vue API中類似React的set方法。

3、如果你希望你的程序更小更快，那么請選擇Vue

React和Vue都將構(gòu)建一個虛擬DOM，并且在應(yīng)用程序狀態(tài)更改時同步更新實際的DOM。兩者都有自己的優(yōu)化方法。Vue核心開發(fā)人員提供了一個基準測試，展示了Vue的渲染系統(tǒng)比React的更快。在這個測試中，10000個項目的列表被渲染了100次。下面的表格展示了比較的結(jié)果。

從實際角度而言，這種基準只與邊緣情況有關(guān)。大多數(shù)應(yīng)用程序不需要經(jīng)常進行這種操作，因此不能將其視為比較的一個重要因素。

雖然頁面的大小與項目相關(guān)，Vue又占據(jù)了優(yōu)勢。目前發(fā)布的Vue庫只有25.6KB。

要用React實現(xiàn)類似的功能，你需要使用React DOM（37.4KB）和React with Addons庫（11.4KB），總共為48.8KB，幾乎是Vue的兩倍。為了公平起見，你可以使用React獲得更多的API，但是不會有雙倍的功能。

感謝你能夠認真閱讀完這篇文章，希望小編分享什么時候使用vue.js內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學(xué)習(xí)!