最近一直在學習Vue，官方文件也粗略的看過三四遍吧（有的東西老是記不住，可能是老了，開個玩笑）。然後自己寫了一個簡單的Demo，模擬了iPhone端的微信介面，實現了一個簡單的聊天功能。

這裡是GitHub的專案地址，目前雖然還是個半成品（有點懶），但對於初學者來說應該會有幫助，因為我也是初學者。使用到的技術棧包括Vue，Vuex，Vue-router，Vue-cli，Pug，Sass等。點選這裡可線上檢視效果，建議使用谷歌瀏覽器並在手機除錯模式下檢視。

這不是一篇純技術文章，更多的是我自己總結的一些方法和對Vue的理解。

初學者的難題

根據我學習的經歷，我覺得對於初學者學習Vue（或React）最大的難題可能就是環境的搭建

從Vue-cli開始

vue-cli是官方提供的一個命令列工具，可以一鍵部署開發環境，這樣會省去很多麻煩。另外，通過vue-cli部署的環境可以直接進入到單檔案元件的學習，這對以後的學習可能會更有幫助。如果自己搭建環境，一個webpack的相關配置都可能把你的意志消磨殆盡（webpack我就踩過很多坑），我猜很多學習Vue或React的新手都是死在環境搭建的過程中。初學者應該把注意力集中在Vue本身，等體會到其中的“樂趣”之後再回過頭來學習npm和webpack等相關知識可能會更好。

vue-cli

# 全域性安裝 vue-cli
npm install -g vue-cli
# 建立一個基於 Webpack 模板的專案
vue init webpack my-project
# 安裝依賴
cd my-project
npm install
# 執行
npm run dev

直接進入到單檔案元件開發

Vue可以直接通過script標籤引入到HTML檔案中，但我不建議這樣學習。因為這就違背了學習Vue的初衷，Vue是一個MVVM框架，其核心思想就是分元件開發，元件的複用，元件解耦。

Vue還可以使用字串模板以及Render渲染來開發元件，其弊端也很明顯。字串模板不支援語法高亮，而且寫起來也不直觀。Render函式渲染相對比較複雜，而且也不直觀。最重要的是他們都無法封裝CSS樣式

單檔案元件（.vue字尾名）很好的實現了元件的封裝，讓元件看起來更像元件。檔案結構如下：

<template lang="html">
    <!-- 這裡是元件的 HTML 標籤 -->
</template>

<script>
export default {
    // 這裡是元件 js 程式碼
}
</script>

<style lang="scss" scoped>
// 這裡是元件的 CSS 樣式
</style>

選擇一款合適的編輯器

我曾經無數次糾結過這個問題：到底是使用Sublime，VS Code，還是Atom？或是WebStorm？百度一下，人們對這些工具也是各執其詞，根本毫無可比性，一下子更不知如何選擇了（選擇困難症，十分痛苦）。現在想想其實也十分可笑，我們完全沒必要把時間花在這些無聊的事情上。這些編輯器我在Windows和MacOS中都嘗試過，最終還是選擇了Sublime陣營。

簡單的說一下，選擇Sublime一個字快，兩個字穩定，三個字外掛豐富（假裝三個字）。Atom介面最好看，尤其是在MacOS下；VS Code沒什麼心得，就是不喜歡；WebStorm相當於IDE，笨重但功能齊全，前端初學者神器（也是我的入門工具）。Atom我也是比較看好的，只是閒置在電腦中，暫時沒怎麼用。

如果你也跟我一樣糾結的話，那我建議你選擇Sublime，什麼也別想，就選它。記住它的一些快捷操作，和一些實用技巧，我相信你會慢慢愛上它的。

Sublime作為前端編輯器，推薦幾個好用的外掛：

• Emmet：前端必備神器；
• DocBlockr：統一文件註釋的風格；
• Babel：支援ES6語法；
• Pug：Jade的新叫法，語法高亮；
• Sass：支援Sass語法高亮；
• Vue Syntax Highlight：Vue必備，語法高亮。

另外推薦一款我在用的主題：Theme - SoDaReloaded。

縱觀全域性

我一直有一個觀點：就是看事物要先看全域性，忽略那些繁瑣的細節，然後再逐個深究。比如看書要先看目錄（雖然我討厭看書），首先做到心裡有數，知道自己在看什麼或有沒有必要再看下去(比如這篇文章)。

比較重要的幾個概念

我不是一個語言表達能力很好的人，不會扯那些概念，我只能儘可能的說一些自己的理解。

這裡先說一句，Vue中的this一般都指向當前的Vue例項。也是就說，在哪個元件中使用，this就指向哪個元件。當然，這只是對於元件本身具有的屬性和方法而言。

Vue例項

通過Vue開發單頁面專案，一個專案就是一個Vue例項（暫且這麼理解吧），也就是通過new Vue()語句建立的物件。那麼既然有了一個例項，那麼要顯示出來，就得放入HTML文件中，這就是掛載。對應語法：

new Vue({
    // el是例項掛載點，會將根元件替換掉原文件中id為 app 標籤
    el: '#app',
    // 通過render函式渲染
    render: h => {
        // 這裡App是根元件
        h(App)
    }
})

// 第二種寫法
new Vue({
    el: '#app',
    // 通過字串模板
    template: '<App />',
    components: { App }
})

Vue擴充套件例項

嚴格來說，通過new Vue()方式建立的例項叫做根例項，而還有一種叫擴充套件例項。這裡引用官方的一句話：所有的 Vue.js 元件其實都是被擴充套件的 Vue 例項（其實我也是剛剛理解）。

擴充套件例項建立方式：

const MyComponent = Vue.extend({
    // 該物件就相當於 單檔案元件中 export 匯出的物件
    // 這就是為什麼說 所有的Vue元件都是被擴充套件的Vue例項
})
// 建立擴充套件例項
const component = new MyComponent()

同樣的，Vue擴充套件例項也需要掛載，其語法與根例項掛載一樣：

// 會替換掉 HTML 文件中 id 為 app 的標籤
new MyComponent({el: '#app'})
// 但是這裡不建議這麼做，因為這樣會與例項掛載點衝突
// 這裡僅僅是為了說明擴充套件例項與 根例項的相似之處

擴充套件例項一個重要的用法就是在需要的時候才被插入到HTML文件中。比如點選一個按鈕，彈出一個模態（modal）框。在我的Demo中，正是通過該方法實現一個載入等待的模態框。通過此方法有一個好處就是，可以將該功能封裝成一個Vue外掛，需要的時候通過一條指令就可以將元件插入到文件中，不需要預先將元件寫入到HTML文件中。方法如下：

// 建立擴充套件例項
let component = new MyComponent()
// 掛載到虛擬DOM中
// 不傳遞引數，若傳遞引數會掛載到指定的地方
component  = component.$mount()
// 通過原生語法將 擴充套件例項新增到HTML文件中
document.body.appendChild(component.$el)

同樣，Vue根例項也可以通過該方式掛載到HTML中。

元件

元件就是擴充套件的Vue例項（哈哈）。反正記住在Vue中，一切可見的東西（但不限於可見的東西）都是元件，一個Vue例項就是由一大堆元件通過一定的組合和巢狀累積起來的。

學習元件無外乎就是它的建立和使用，通過擴充套件Vue例項也算是一種建立的方式，另外還有字串模板和render函式渲染的方式。我一開始就建議直接使用單檔案元件，具體請轉移官方文件或從GitHub上Clone我的demo檢視詳情。

生命週期

每個元件都有自己的生命週期，從廣義上來說，Vue例項其實也是一個元件。一般常用的幾個生命週期鉤子：created，mounted，updated，destroyed。mounted基本上用的最多。

所謂的生命週期鉤子，就是說元件在特定的時刻會自動觸發該事件，執行對應的函式。

學習Vue的基本思想

程式設計師，其實大部分時間是用於思考的。建立一種思想，一種思維方式很重要。這也是我現在一直在努力做的事。

學習一個框架，就要站在它的角度去思考問題。而Vue是一種MVVM模式的框架，所以有必要先理解什麼是MVVM？然後再去思考Vue的基本原理，它能做什麼？又是如何做到的？為什麼要使用Vue？可以去看一下官方文件：Vue與其他框架的對比。

什麼是MVVM

M就是Model（模型），V就是View（介面），MVVM也是就說通過模型的改變來更新介面，然後通過介面的一些行為事件又來作用於模型。當然，這只是從字面上來解釋。要更好的體會到Vue的MVVM思想，我建議去學習Vuex。

之前，我們使用jQuery或原生JS要想更改介面上的內容，首先必須找到對應的DOM節點，然後通過直接操作DOM的語句來改變介面上的內容。而MVVM的思維方式就是：一個模型對應一個介面，介面的狀態和顯示的內容完全取決於它對應的模型。而我們只需改變模型，後臺（Vue）就會通過某種機制自動去更新介面。

什麼是MVC

順便談一下MVC設計模式，它其實是出現在MVVM之前，其中的C是指Controller（控制器）。MVC的基本思想就是：模型與介面之間的通訊都是通過中間的控制器實現的。所以它的缺陷就是控制器層需要處理大量的業務邏輯程式碼，不利於開發和維護。

Vue的基本原理

我沒有研究過Vue的原始碼，也解釋不出來它是怎麼實現的？畢竟我們是使用框架，通過它來提高開發效率，沒必要太過於深究，否則就失去了使用它的意義（大神請忽略之）。記住一句話：我們是站在巨人的肩膀上開發的。如果什麼都要去深究其原理，那還不累死？

Vue的核心是元件，一切可以看見的東西都是由元件構成。然後通過把不同的元件組合和巢狀在一起，最終組成了一個根元件，也就是App。根元件會掛載到Vue的根例項中，而Vue根例項本身也相對於一個元件，然後又掛載到真實的HTML文件中。對應的語句也就是main.js檔案中的語句。

new Vue({
    // 該屬性會 將Vue例項掛載到 真實的HTML中
    el: '#app',
    // App 就是根元件，被掛載到Vue例項中
    render: h => h(App)
})

後記

越寫到後面感覺越偏離主題（不知所云，看來得好好練一下文筆了），實在寫不出想要的那種效果，所以就先到此為止吧。先整理一下思路，後面有時間會接著更新，希望自己會堅持下去，這是第一篇。

最後，我只想說一句話：中國文字果然博大精深！