[譯] Vue讓我喜歡的10個方面

原文連接：10 things I love about Vue

原文做者：Duncan Grant

譯者注：這篇文章寫的比較淺顯，只是做者從自身嘗試使用Vue後的一些見解，因此不用期待這篇文章的深度，但也不失爲剛開始使用Vue的用戶提供多一些看法。

---

我喜歡Vue。當我第一次接觸它的時候，也許我正經歷着對JavaScript框架厭倦。我有使用Backbone、Angular、React的經驗，在其餘框架裏我已經沒有了嘗試的熱情。直到我在hacker news上看到的一條評論勾起了個人興趣，他把Vue稱做「新的JQuery」。那個時候，React是相對讓我滿意的，由於React有着在視圖模板上嚴格的設計原則、虛擬DOM和狀態響應的特色，不過Vue也兼具這些特色。在這篇文章裏我想說說爲何Vue是我喜歡的框架，而不是其餘我嘗試過的。希望你能贊成個人見解，不過至少我但願在使用Vue開發現代JavaScript應用上給你提供一些見解。

極小的模板語法

Vue默認的模板語法是極小的、精煉的、可擴展的。就像Vue的不少方面，不使用標準模板語法是一件很簡單的事，並且可使用像JSX這種語法（官方文檔中有說明該如何作），但說實話我不知道你爲何會想這麼作。對於JSX的好處，也有一些說的對的，好比模糊了JavaScript和HTML的界限，能夠很容易的把原本應該分散在幾個地方寫的代碼混合着寫在一塊兒。

Vue反而使用了標準HTML來寫模板，藉助極小的模板語法能夠作一些簡單的事，好比建立重複的基於視圖數據的元素。

<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提供的快速綁定，「：」用來綁定數據變量，「@」用來綁定事件。這個特色雖小但能很好的保持組件的簡潔明瞭。

單文件組件

大部分人寫Vue的時候都在使用「單文件組件」，它是一個後綴是.vue的文件，包含3個部分（css, html, javascript）。

這麼作是對的，這樣能夠很容易的理解一個組件，它也鼓勵你對於每一個組件保持簡短的代碼。由於若是一個組件裏的JavaScript，CSS和HTML篇幅很長的話，之後還得花時間去作模塊化處理。

當在一個組件裏使用<style>標籤的時候，我能夠給它增長「scoped」屬性，這樣定義的樣式只對這個組件有效，換句話說，若是在這個組件裏定義了一個.name的CSS選擇器，它不會在其餘組件裏生效。相對於其餘框架採用的CSS in JS的方式，我更喜歡這種在組件中寫樣式的方式。

單文件組件另外一個好處是，這是有效HTML5文件。<template>, <script>, <style>都是W3C官方標準中有的，這意味着你在開發過程當中使用的其餘工具（好比linters），能夠通過很小的調整就能使用。

Vue比做新的JQuery

這兩個框架真的一點也不像，並且做用也不同。讓我來作一個我喜歡用的糟糕的類比來描述一下Vue和JQuery的關係：披頭士樂隊和齊柏林飛艇樂隊。披頭士樂隊不用多說，他們是60年代最火的團體，有着極大的影響力。很難說70年代裏最火的團體是誰，但齊柏林飛艇樂隊有時候也算得上。你能夠說披鬥士樂隊和齊柏林飛艇樂隊在音樂上沒什麼關係，並且他們的音樂區別很是明顯，但他們都受到了先前藝術的影響。也許2010年以後的JavaScript就像70年代的音樂世界，隨着Vue被更多的電臺播放，它會吸引更多的粉絲。

一些讓JQuery成爲偉大的哲學也在Vue中出現了：它有着簡單的學習曲線，同時有着基於現代Web標準打造一個Web應用全部力量。基於這一點，Vue就是對JavaScript對象的一個封裝。

便於擴展

像前面提到的，Vue默認使用標準的HTML、JS和CSS建立組件，但它也容易引入其餘技術。若是你想用pug代替HTML、typescript代替JS、sass代替CSS，只需按照相應node模塊和在單文件組件中添加相應屬性就能夠。你甚至能夠在一個項目中混合使用這些，好比一些組件使用HTML，另一些使用pug，即使我不肯定這是最好的作法。

虛擬DOM

虛擬DOM很棒，而且已經被不少框架採用。它可讓狀態變化的時候高效的更新DOM，而且最小化從新渲染和優化應用性能。最近誰都有虛擬DOM了，因此這也不是什麼獨特的，但它仍是很酷。

Vuex很棒

對於大部分應用，狀態管理是一個很難辦的事，只靠視圖層沒法解決。Vue的解決辦法是Vuex。很簡單就能夠設置好並和Vue集成好。熟悉Redux的人這個時候就像回家了，但我以爲相比React集成Redux，Vue集成Vuex更簡潔。在JavaScript即將公佈的新標準裏，提供了對象展開運算符，它容許咱們合併狀態或函數，去操做從Vuex到組件的狀態。

Vue CLI

Vue提供的CLI使得開始一個webpack結合Vue的項目很容易。一個命令就能夠建立出支持單文件組件、babel、linting、測試和合理目錄結構的項目。

我很懷念「vue build」命令。它讓建立、運行組件還有測試看上去很容易。不幸的是，這個命令之後會從Vue中被去除，改成推薦使用poi。簡單來說，poi是webpack的封裝，但我不以爲它像如下代碼同樣簡便：

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

從新渲染優化

在Vue中你沒必要手動的指出DOM的哪些部分須要從新渲染，我歷來不是一個管理React組件的粉絲，好比爲了阻止整個DOM樹從新渲染使用「shouldComponentUpdate」。Vue在這方面很聰明。

容易得到幫助

Vue已經積累了使用它去打造各類應用的大量重要開發者。文檔很好，若是須要更多幫助，也能夠在不少平臺上找到活躍用戶：stackoverflow, discord, twitter等等，相比於有更少用戶的其餘框架，這會讓你在打造應用時更自信。

不是單一企業維護

我以爲對於一個開源項目來講，不讓單一的企業掌握更多發展方向的話語權是一件好事。像React受權那樣的問題，Vue是沒有的。

最後，我認爲Vue是你作任何JavaScript項目都不錯的選擇。它的生態要比我在這篇文章裏提到的大得多。對於全棧方面，你能夠看看Nuxt.js。若是你想要一些可重用的組件，你能夠看看Vuetify。Vue已經成爲了2017年發展最快的框架之一，而且我預測在2018年它的發展不會減速。若是你還有30分鐘的話，爲何不行動起來看看Vue能給你帶來什麼呢？

P.S.Vue和其餘框架對比的文檔：Comparison with Other Frameworks — Vue.js