[[223131]]

我喜歡 Vue。當(dāng)我在 2016 年第一次接觸它時(shí)，也許那時(shí)我已經(jīng)對(duì) JavaScript 框架感到疲勞了，因?yàn)槲乙呀?jīng)具有Backbone、Angular、React 等框架的經(jīng)驗(yàn)，沒有太多的熱情去嘗試一個(gè)新的框架。直到我在 Hacker News 上讀到一份評(píng)論，其描述 Vue 是類似于“新 jQuery” 的 JavaScript 框架，從而激發(fā)了我的好奇心。在那之前，我已經(jīng)相當(dāng)滿意 React 這個(gè)框架，它是一個(gè)很好的框架，建立于可靠的設(shè)計(jì)原則之上，圍繞著視圖模板、虛擬 DOM 和狀態(tài)響應(yīng)等技術(shù)。而 Vue 也提供了這些重要的內(nèi)容。

在這篇文章中，我旨在解釋為什么 Vue 適合我，為什么在上文中那些我嘗試過的框架中選擇它。也許你將同意我的一些觀點(diǎn)，但至少我希望能夠給大家使用 Vue 開發(fā)現(xiàn)代 JavaScript 應(yīng)用一些靈感。

1、 極少的模板語法

Vue 默認(rèn)提供的視圖模板語法是極小的、簡潔的和可擴(kuò)展的。像其他 Vue 部分一樣，可以很簡單的使用類似 JSX 一樣語法，而不使用標(biāo)準(zhǔn)的模板語法（甚至有官方文檔說明了如何做），但是我覺得沒必要這么做。JSX 有好的方面，也有一些有依據(jù)的批評(píng)，如混淆了 JavaScript 和 HTML，使得很容易導(dǎo)致在模板中出現(xiàn)復(fù)雜的代碼，而本來應(yīng)該分開寫在不同的地方的。

Vue 沒有使用標(biāo)準(zhǔn)的 HTML 來編寫視圖模板，而是使用極少的模板語法來處理簡單的事情，如基于視圖數(shù)據(jù)迭代創(chuàng)建元素。

<template>
  <div id="app">
    <ul>
      <li v-for='number in numbers' :key='number'>{{ number }}</li>
    </ul>
    <form @submit.prevent='addNumber'>
      <input type='text' v-model='newNumber'>
      <button type='submit'>Add another number</button>
    </form>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  methods: {
    addNumber() {
      const num = +this.newNumber;
      if (typeof num === 'number' && !isNaN(num)) {
        this.numbers.push(num);
      }
    }
  },
  data() {
    return {
      newNumber: null,
      numbers: [1, 23, 52, 46]
    };
  }
}
</script>
 
<style lang="scss">
ul {
  padding: 0;
  li {
    list-style-type: none;
    color: blue;
  }
}
</style>

我也喜歡 Vue 提供的簡短綁定語法，: 用于在模板中綁定數(shù)據(jù)變量，@ 用于綁定事件。這是一個(gè)細(xì)節(jié)，但寫起來很爽而且能夠讓你的組件代碼簡潔。

2、 單文件組件

大多數(shù)人使用 Vue，都使用“單文件組件”。本質(zhì)上就是一個(gè) .vue 文件對(duì)應(yīng)一個(gè)組件，其中包含三部分（CSS、HTML和JavaScript）。

這種技術(shù)結(jié)合是對(duì)的。它讓人很容易在一個(gè)單獨(dú)的地方了解每個(gè)組件，同時(shí)也非常好的鼓勵(lì)了大家保持每個(gè)組件代碼的簡短。如果你的組件中 JavaScript、CSS 和 HTML 代碼占了很多行，那么就到了進(jìn)一步模塊化的時(shí)刻了。

在使用 Vue 組件中的 <style> 標(biāo)簽時(shí)，我們可以添加 scoped 屬性。這會(huì)讓整個(gè)樣式完全的封裝到當(dāng)前組件，意思是在組件中如果我們寫了 .name 的 css 選擇器，它不會(huì)把樣式應(yīng)用到其他組件中。我非常喜歡這種方式來應(yīng)用樣式而不是像其他主要框架流行在 JS 中編寫 CSS 的方式。

關(guān)于單文件組件另一個(gè)好處是 .vue 文件實(shí)際上是一個(gè)有效的 HTML 5 文件。<template>、 <script>、 <style> 都是 w3c 官方規(guī)范的標(biāo)簽。這就表示很多如 linters （LCTT 譯注：一種代碼檢查工具插件）這樣我們用于開發(fā)過程中的工具能夠開箱即用或者添加一些適配后使用。

3、 Vue “新的 jQuery”

事實(shí)上，這兩個(gè)庫不相似而且用于做不同的事。讓我提供給你一個(gè)很精辟的類比（我實(shí)際上非常喜歡描述 Vue 和 jQuery 之間的關(guān)系）：披頭士樂隊(duì)和齊柏林飛船樂隊(duì)（LCTT 譯注：兩個(gè)都是英國著名的樂隊(duì)）。披頭士樂隊(duì)不需要介紹，他們是 20 世紀(jì) 60 年代最大的和最有影響力的樂隊(duì)。但很難說披頭士樂隊(duì)是 20 世紀(jì) 70 年代最大的樂隊(duì)，因?yàn)橛袝r(shí)這個(gè)榮耀屬于是齊柏林飛船樂隊(duì)。你可以說兩個(gè)樂隊(duì)之間有著微妙的音樂聯(lián)系或者說他們的音樂是明顯不同的，但兩者一些先前的藝術(shù)和影響力是不可否認(rèn)的。也許 21 世紀(jì)初 JavaScript 的世界就像 20 世紀(jì) 70 年代的音樂世界一樣，隨著 Vue 獲得更多關(guān)注使用，只會(huì)吸引更多粉絲。

一些使 jQuery 牛逼的哲學(xué)理念在 Vue 中也有呈現(xiàn)：非常容易的學(xué)習(xí)曲線但卻具有基于現(xiàn)代 web 標(biāo)準(zhǔn)構(gòu)建牛逼 web 應(yīng)用所有你需要的功能。Vue 的核心本質(zhì)上就是在 JavaScript 對(duì)象上包裝了一層。

4、 極易擴(kuò)展

正如前述，Vue 默認(rèn)使用標(biāo)準(zhǔn)的 HTML、JS 和 CSS 構(gòu)建組件，但可以很容易插入其他技術(shù)。如果我們想使用pug（LCTT譯注：一款功能豐富的模板引擎，專門為 Node.js 平臺(tái)開發(fā)）替換 HTML 或者使用 Typescript（LCTT譯注：一種由微軟開發(fā)的編程語言，是 JavaScript 的一個(gè)超集）替換 js 或者 Sass （LCTT 譯注：一種 CSS 擴(kuò)展語言）替換 CSS，只需要安裝相關(guān)的 node 模塊和在我們的單文件組件中添加一個(gè)屬性到相關(guān)的標(biāo)簽即可。你甚至可以在一個(gè)項(xiàng)目中混合搭配使用 —— 如一些組件使用 HTML 其他使用 pug ——然而我不太確定這么做是最好的做法。

5、 虛擬 DOM

虛擬 DOM 是很好的技術(shù)，被用于現(xiàn)如今很多框架。其意味著這些框架能夠做到根據(jù)我們狀態(tài)的改變來高效的完成 DOM 更新，減少重新渲染，從而優(yōu)化我們應(yīng)用的性能?，F(xiàn)如今每個(gè)框架都有虛擬 DOM 技術(shù)，所以雖然它不是什么獨(dú)特的東西，但它仍然很出色。

6、 Vuex 很棒

對(duì)于大多數(shù)應(yīng)用，管理狀態(tài)成為一個(gè)棘手的問題，單獨(dú)使用一個(gè)視圖庫不能解決這個(gè)問題。Vue 使用 Vuex 庫來解決這個(gè)問題。Vuex 很容易構(gòu)建而且和 Vue 集成的很好。熟悉 redux（另一個(gè)管理狀態(tài)的庫）的人學(xué)習(xí) Vuex 會(huì)覺得輕車熟路，但是我發(fā)現(xiàn) Vue 和 Vuex 集成起來更加簡潔。最新 JavaScript 草案中（LCTT 譯注：應(yīng)該是指 ES7）提供了對(duì)象展開運(yùn)算符（LCTT 譯注：符號(hào)為 ...），允許我們?cè)跔顟B(tài)或函數(shù)中進(jìn)行合并，以操縱從 Vuex 到需要它的 Vue 組件中的狀態(tài)。

7、 Vue 的命令行界面（CLI）

Vue 提供的命令行界面非常不錯(cuò)，很容易用 Vue 搭建一個(gè)基于 Webpack（LCTT 譯注：一個(gè)前端資源加載/打包工具）的項(xiàng)目。單文件組件支持、babel（LCTT 譯注：js 語法轉(zhuǎn)換器）、linting（LCTT譯注：代碼檢查工具）、測(cè)試工具支持，以及合理的項(xiàng)目結(jié)構(gòu)，都可以在終端中一行命令創(chuàng)建。

然而有一個(gè)命令，我在 CLI 中沒有找到，那就是 vue build。

如：

echo '<template><h1>Hello World!</h1></template>' > Hello.vue && vue build Hello.vue -o

vue build 命令構(gòu)建和運(yùn)行組件并在瀏覽器中測(cè)試看起來非常簡單。很不幸這個(gè)命令后來在 Vue 中刪除了，現(xiàn)在推薦使用 Poi。Poi 本質(zhì)上是在 Webpack 工具上封裝了一層，但我不認(rèn)我它像推特上說的那樣簡單。

8、 重新渲染優(yōu)化

使用 Vue，你不必手動(dòng)聲明 DOM 的哪部分應(yīng)該被重新渲染。我從來都不喜歡操縱 React 組件的渲染，像在shouldComponentUpdate 方法中停止整個(gè) DOM 樹重新渲染這種。Vue 在這方面非常巧妙。

9、 容易獲得幫助

Vue 已經(jīng)達(dá)到了使用這個(gè)框架來構(gòu)建各種各樣的應(yīng)用的一種群聚效應(yīng)。開發(fā)文檔非常完善。如果你需要進(jìn)一步的幫助，有多種渠道可用，每個(gè)渠道都有很多活躍開發(fā)者：stackoverflow、discord、twitter 等。相對(duì)于其他用戶量少的框架，這就應(yīng)該給你更多的信心來使用Vue構(gòu)建應(yīng)用。

10、 多機(jī)構(gòu)維護(hù)

我認(rèn)為，一個(gè)開源庫，在發(fā)展方向方面的投票權(quán)利沒有被單一機(jī)構(gòu)操縱過多，是一個(gè)好事。就如同 React 的許可證問題（現(xiàn)已解決），Vue 就不可能涉及到。

總之，作為你接下來要開發(fā)的任何 JavaScript 項(xiàng)目，我認(rèn)為 Vue 都是一個(gè)極好的選擇。Vue 可用的生態(tài)圈比我博客中涉及到的其他庫都要大。如果想要更全面的產(chǎn)品，你可以關(guān)注 Nuxt.js。如果你需要一些可重復(fù)使用的樣式組件你可以關(guān)注類似 Vuetify 的庫。

Vue 是 2017 年增長最快的庫之一，我預(yù)測(cè)在 2018 年增長速度不會(huì)放緩。

如果你有空閑的 30 分鐘，為什么不嘗試下 Vue，看它可以給你提供什么呢？