vue淺談

vue 綜合了angualr和react的優點，是國人寫的框架，易上手，輕量級，受到廣泛的應用。

極小的模板語法

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的檔案，包含3個部分（css,html,javascript).

這麼做是對的，這樣可以很容易理解的一個元件，它鼓勵你對每個元件保持簡短的程式碼。因為如果一個元件裡的javascript,css和html篇幅很長的話，以後還得花時間去做模組化處理。

當一個元件裡使用style標籤的時候，我可以給他新增"scope"屬性，這樣定義的樣式只對這個元件有效，換句話說，如果這個元件裡定義了一個.name的css選擇器，它不會在其他元件裡生效。相對於其他框架裡採用的css in js 的方式，我更喜歡這種在組建中樣式的方式。

單檔案元件另一個好處是，這是有效HTML5檔案。<template>, <script>, <style>

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了，所以這也不是什麼獨特的，但它還是很酷

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。