我喜歡 Vue 的 10 個方面

我喜歡 Vue。當我在 2016 年第一次接觸它時，也許那時我已經對 JavaScript 框架感到疲勞了，因為我已經具有Backbone、Angular、React 等框架的經驗，沒有太多的熱情去嘗試一個新的框架。直到我在 Hacker News 上讀到一份評論，其描述 Vue 是類似於「新 jQuery」 的 JavaScript 框架，從而激發了我的好奇心。在那之前，我已經相當滿意 React 這個框架，它是一個很好的框架，建立於可靠的設計原則之上，圍繞著視圖模板、虛擬 DOM 和狀態響應等技術。而 Vue 也提供了這些重要的內容。

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

1、 極少的模板語法

Vue 默認提供的視圖模板語法是極小的、簡潔的和可擴展的。像其他 Vue 部分一樣，可以很簡單的使用類似 JSX 一樣語法，而不使用標準的模板語法（甚至有官方文檔說明了如何做），但是我覺得沒必要這麼做。JSX 有好的方面，也有一些有依據的批評，如混淆了 JavaScript 和 HTML，使得很容易導致在模板中出現複雜的代碼，而本來應該分開寫在不同的地方的。

Vue 沒有使用標準的 HTML 來編寫視圖模板，而是使用極少的模板語法來處理簡單的事情，如基於視圖數據迭代創建元素。

<template>
  <div id="app">
    <ul>
      <li v-for=&apos;number in numbers&apos; :key=&apos;number&apos;>{{ number }}</li>
    </ul>
    <form @submit.prevent=&apos;addNumber&apos;>
      <input type=&apos;text&apos; v-model=&apos;newNumber&apos;>
      <button type=&apos;submit&apos;>Add another number</button>
    </form>
  </div>
</template>

<script>
export default {
  name: &apos;app&apos;,
  methods: {
    addNumber() {
      const num = +this.newNumber;
      if (typeof num === &apos;number&apos; && !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 提供的簡短綁定語法，: 用於在模板中綁定數據變數，@ 用於綁定事件。這是一個細節，但寫起來很爽而且能夠讓你的組件代碼簡潔。

2、 單文件組件

大多數人使用 Vue，都使用「單文件組件」。本質上就是一個 .vue 文件對應一個組件，其中包含三部分（CSS、HTML和JavaScript）。

這種技術結合是對的。它讓人很容易在一個單獨的地方了解每個組件，同時也非常好的鼓勵了大家保持每個組件代碼的簡短。如果你的組件中 JavaScript、CSS 和 HTML 代碼佔了很多行，那麼就到了進一步模塊化的時刻了。

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

關於單文件組件另一個好處是 .vue 文件實際上是一個有效的 HTML 5 文件。<template>、 <script>、 <style> 都是 w3c 官方規範的標籤。這就表示很多如 linters （LCTT 譯註：一種代碼檢查工具插件）這樣我們用於開發過程中的工具能夠開箱即用或者添加一些適配後使用。

3、 Vue 「新的 jQuery」

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

一些使 jQuery 牛逼的哲學理念在 Vue 中也有呈現：非常容易的學習曲線但卻具有基於現代 web 標準構建牛逼 web 應用所有你需要的功能。Vue 的核心本質上就是在 JavaScript 對象上包裝了一層。

4、 極易擴展

正如前述，Vue 默認使用標準的 HTML、JS 和 CSS 構建組件，但可以很容易插入其他技術。如果我們想使用pug（LCTT譯註：一款功能豐富的模板引擎，專門為 Node.js 平台開發）替換 HTML 或者使用 Typescript（LCTT譯註：一種由微軟開發的編程語言，是 JavaScript 的一個超集）替換 js 或者 Sass （LCTT 譯註：一種 CSS 擴展語言）替換 CSS，只需要安裝相關的 node 模塊和在我們的單文件組件中添加一個屬性到相關的標籤即可。你甚至可以在一個項目中混合搭配使用 —— 如一些組件使用 HTML 其他使用 pug ——然而我不太確定這麼做是最好的做法。

5、 虛擬 DOM

虛擬 DOM 是很好的技術，被用於現如今很多框架。其意味著這些框架能夠做到根據我們狀態的改變來高效的完成 DOM 更新，減少重新渲染，從而優化我們應用的性能。現如今每個框架都有虛擬 DOM 技術，所以雖然它不是什麼獨特的東西，但它仍然很出色。

6、 Vuex 很棒

對於大多數應用，管理狀態成為一個棘手的問題，單獨使用一個視圖庫不能解決這個問題。Vue 使用 Vuex 庫來解決這個問題。Vuex 很容易構建而且和 Vue 集成的很好。熟悉 redux（另一個管理狀態的庫）的人學習 Vuex 會覺得輕車熟路，但是我發現 Vue 和 Vuex 集成起來更加簡潔。最新 JavaScript 草案中（LCTT 譯註：應該是指 ES7）提供了對象展開運算符（LCTT 譯註：符號為 ...），允許我們在狀態或函數中進行合併，以操縱從 Vuex 到需要它的 Vue 組件中的狀態。

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

Vue 提供的命令行界面非常不錯，很容易用 Vue 搭建一個基於 Webpack（LCTT 譯註：一個前端資源載入/打包工具）的項目。單文件組件支持、babel（LCTT 譯註：js 語法轉換器）、linting（LCTT譯註：代碼檢查工具）、測試工具支持，以及合理的項目結構，都可以在終端中一行命令創建。

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

如：

echo '' > Hello.vue && vue build Hello.vue -o

vue build 命令構建和運行組件並在瀏覽器中測試看起來非常簡單。很不幸這個命令後來在 Vue 中刪除了，現在推薦使用 Poi。Poi 本質上是在 Webpack 工具上封裝了一層，但我不認我它像推特上說的那樣簡單。

8、 重新渲染優化

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

9、 容易獲得幫助

Vue 已經達到了使用這個框架來構建各種各樣的應用的一種群聚效應。開發文檔非常完善。如果你需要進一步的幫助，有多種渠道可用，每個渠道都有很多活躍開發者：stackoverflow、discord、twitter 等。相對於其他用戶量少的框架，這就應該給你更多的信心來使用Vue構建應用。

10、 多機構維護

我認為，一個開源庫，在發展方向方面的投票權利沒有被單一機構操縱過多，是一個好事。就如同 React 的許可證問題（現已解決），Vue 就不可能涉及到。

總之，作為你接下來要開發的任何 JavaScript 項目，我認為 Vue 都是一個極好的選擇。Vue 可用的生態圈比我博客中涉及到的其他庫都要大。如果想要更全面的產品，你可以關注 Nuxt.js。如果你需要一些可重複使用的樣式組件你可以關注類似 Vuetify 的庫。

Vue 是 2017 年增長最快的庫之一，我預測在 2018 年增長速度不會放緩。

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

P.S. — 這篇文檔很好的展示了 Vue 和其他框架的比較：https://vuejs.org/v2/guide/comparison.html

via: https://medium.com/@dalaidunc/10-things-i-love-about-vue-505886ddaff2

作者：Duncan Grant 譯者：yizhuoyan 校對：wxy

本文由 LCTT 原創編譯，Linux中國 榮譽推出

本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive