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

9sunsky發表於2018-02-08
Vue

原文連結：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

相關文章