最近一直在學習Vue，官方文檔也粗略的看過三四遍吧（有的東西老是記不住，可能是老了，開個玩笑）。然后自己寫了一個簡單的Demo，模擬了iPhone端的微信界面，實現(xiàn)了一個簡單的聊天功能。
這里是GitHub的項目地址，目前雖然還是個半成品（有點懶），但對于初學者來說應該會有幫助，因為我也是初學者。使用到的技術棧包括Vue，Vuex，Vue-router，Vue-cli，Pug，Sass等。點擊這里可在線查看效果，建議使用谷歌瀏覽器并在手機調試模式下查看。
這不是一篇純技術文章，更多的是我自己總結的一些方法和對Vue的理解。
根據(jù)我學習的經歷，我覺得對于初學者學習Vue（或React）最大的難題可能就是環(huán)境的搭建，尤其是對于沒有NodeJS方面經驗的人來說。這里我要說一下自己對于學習Vue的一些見解，可供參考。
vue-cli是官方提供的一個命令行工具，可以一鍵部署開發(fā)環(huán)境，這樣會省去很多麻煩。另外，通過vue-cli部署的環(huán)境可以直接進入到單文件組件的學習，這對以后的學習可能會更有幫助。如果自己搭建環(huán)境，一個webpack的相關配置都可能把你的意志消磨殆盡（webpack我就踩過很多坑），我猜很多學習Vue或React的新手都是死在環(huán)境搭建的過程中。初學者應該把注意力集中在Vue本身，等體會到其中的“樂趣”之后再回過頭來學習npm和webpack等相關知識可能會更好。
vue-cli使用如下，建議使用cnpm代替npm，具體可自行百度或Google。
# 全局安裝 vue-clinpm install -g vue-cli# 創(chuàng)建一個基于 Webpack 模板的項目vue init webpack my-project# 安裝依賴cd my-projectnpm install# 運行npm run devVue可以直接通過script標簽引入到HTML文件中，但我不建議這樣學習。因為這就違背了學習Vue的初衷，Vue是一個MVVM框架，其核心思想就是分組件開發(fā)，組件的復用，組件解耦。
Vue還可以使用字符串模板以及Render渲染來開發(fā)組件，其弊端也很明顯。字符串模板不支持語法高亮，而且寫起來也不直觀。Render函數(shù)渲染相對比較復雜，而且也不直觀。最重要的是他們都無法封裝CSS樣式，也無法使用預處理器（Pug和Sass）。
單文件組件（.vue后綴名）很好的實現(xiàn)了組件的封裝，讓組件看起來更像組件。文件結構如下：
<template lang='html'> <!-- 這里是組件的 HTML 標簽 --></template><script>export default { // 這里是組件 js 代碼}</script><style lang='scss' scoped>// 這里是組件的 CSS 樣式</style>我曾經無數(shù)次糾結過這個問題：到底是使用Sublime，VS Code，還是Atom？或是WebStorm？百度一下，人們對這些工具也是各執(zhí)其詞，根本毫無可比性，一下子更不知如何選擇了（選擇困難癥，十分痛苦）?，F(xiàn)在想想其實也十分可笑，我們完全沒必要把時間花在這些無聊的事情上。這些編輯器我在Windows和MacOS中都嘗試過，最終還是選擇了Sublime陣營。
簡單的說一下，選擇Sublime一個字快，兩個字穩(wěn)定，三個字插件豐富（假裝三個字）。Atom界面最好看，尤其是在MacOS下；VS Code沒什么心得，就是不喜歡；WebStorm相當于IDE，笨重但功能齊全，前端初學者神器（也是我的入門工具）。Atom我也是比較看好的，只是閑置在電腦中，暫時沒怎么用。
如果你也跟我一樣糾結的話，那我建議你選擇Sublime，什么也別想，就選它。記住它的一些快捷操作，和一些實用技巧，我相信你會慢慢愛上它的。
Sublime作為前端編輯器，推薦幾個好用的插件：
另外推薦一款我在用的主題：Theme - SoDaReloaded。
我一直有一個觀點：就是看事物要先看全局，忽略那些繁瑣的細節(jié)，然后再逐個深究。比如看書要先看目錄（雖然我討厭看書），首先做到心里有數(shù)，知道自己在看什么或有沒有必要再看下去(比如這篇文章)。
我不是一個語言表達能力很好的人，不會扯那些概念，我只能盡可能的說一些自己的理解。
這里先說一句，Vue中的this一般都指向當前的Vue實例。也是就說，在哪個組件中使用，this就指向哪個組件。當然，這只是對于組件本身具有的屬性和方法而言。
通過Vue開發(fā)單頁面項目，一個項目就是一個Vue實例（暫且這么理解吧），也就是通過new Vue()語句創(chuàng)建的對象。那么既然有了一個實例，那么要顯示出來，就得放入HTML文檔中，這就是掛載。對應語法：
new Vue({ // el是實例掛載點，會將根組件替換掉原文檔中id為 app 標簽 el: '#app', // 通過render函數(shù)渲染 render: h => { // 這里App是根組件 h(App) }})// 第二種寫法new Vue({ el: '#app', // 通過字符串模板 template: '<App />', components: { App }})嚴格來說，通過new Vue()方式創(chuàng)建的實例叫做根實例，而還有一種叫擴展實例。這里引用官方的一句話：所有的 Vue.js 組件其實都是被擴展的 Vue 實例（其實我也是剛剛理解）。
擴展實例創(chuàng)建方式：
const MyComponent = Vue.extend({ // 該對象就相當于 單文件組件中 export 導出的對象 // 這就是為什么說 所有的Vue組件都是被擴展的Vue實例})// 創(chuàng)建擴展實例const component = new MyComponent()同樣的，Vue擴展實例也需要掛載，其語法與根實例掛載一樣：
// 會替換掉 HTML 文檔中 id 為 app 的標簽new MyComponent({el: '#app'})// 但是這里不建議這么做，因為這樣會與實例掛載點沖突// 這里僅僅是為了說明擴展實例與 根實例的相似之處擴展實例一個重要的用法就是在需要的時候才被插入到HTML文檔中。比如點擊一個按鈕，彈出一個模態(tài)（modal）框。在我的Demo中，正是通過該方法實現(xiàn)一個加載等待的模態(tài)框。通過此方法有一個好處就是，可以將該功能封裝成一個Vue插件，需要的時候通過一條指令就可以將組件插入到文檔中，不需要預先將組件寫入到HTML文檔中。方法如下：
// 創(chuàng)建擴展實例let component = new MyComponent()// 掛載到虛擬DOM中// 不傳遞參數(shù)，若傳遞參數(shù)會掛載到指定的地方component = component.$mount()// 通過原生語法將 擴展實例添加到HTML文檔中document.body.appendChild(component.$el)同樣，Vue根實例也可以通過該方式掛載到HTML中。
組件就是擴展的Vue實例（哈哈）。反正記住在Vue中，一切可見的東西（但不限于可見的東西）都是組件，一個Vue實例就是由一大堆組件通過一定的組合和嵌套累積起來的。
學習組件無外乎就是它的創(chuàng)建和使用，通過擴展Vue實例也算是一種創(chuàng)建的方式，另外還有字符串模板和render函數(shù)渲染的方式。我一開始就建議直接使用單文件組件，具體請轉移官方文檔或從GitHub上Clone我的demo查看詳情。
每個組件都有自己的生命周期，從廣義上來說，Vue實例其實也是一個組件。一般常用的幾個生命周期鉤子：created，mounted，updated，destroyed。mounted基本上用的最多。
所謂的生命周期鉤子，就是說組件在特定的時刻會自動觸發(fā)該事件，執(zhí)行對應的函數(shù)。
程序員，其實大部分時間是用于思考的。建立一種思想，一種思維方式很重要。這也是我現(xiàn)在一直在努力做的事。
學習一個框架，就要站在它的角度去思考問題。而Vue是一種MVVM模式的框架，所以有必要先理解什么是MVVM？然后再去思考Vue的基本原理，它能做什么？又是如何做到的？為什么要使用Vue？可以去看一下官方文檔：Vue與其他框架的對比。
M就是Model（模型），V就是View（界面），MVVM也是就說通過模型的改變來更新界面，然后通過界面的一些行為事件又來作用于模型。當然，這只是從字面上來解釋。要更好的體會到Vue的MVVM思想，我建議去學習Vuex。
之前，我們使用jQuery或原生JS要想更改界面上的內容，首先必須找到對應的DOM節(jié)點，然后通過直接操作DOM的語句來改變界面上的內容。而MVVM的思維方式就是：一個模型對應一個界面，界面的狀態(tài)和顯示的內容完全取決于它對應的模型。而我們只需改變模型，后臺（Vue）就會通過某種機制自動去更新界面。
順便談一下MVC設計模式，它其實是出現(xiàn)在MVVM之前，其中的C是指Controller（控制器）。MVC的基本思想就是：模型與界面之間的通信都是通過中間的控制器實現(xiàn)的。所以它的缺陷就是控制器層需要處理大量的業(yè)務邏輯代碼，不利于開發(fā)和維護。
我沒有研究過Vue的源碼，也解釋不出來它是怎么實現(xiàn)的？畢竟我們是使用框架，通過它來提高開發(fā)效率，沒必要太過于深究，否則就失去了使用它的意義（大神請忽略之）。記住一句話：我們是站在巨人的肩膀上開發(fā)的。如果什么都要去深究其原理，那還不累死？
Vue的核心是組件，一切可以看見的東西都是由組件構成。然后通過把不同的組件組合和嵌套在一起，最終組成了一個根組件，也就是App。根組件會掛載到Vue的根實例中，而Vue根實例本身也相對于一個組件，然后又掛載到真實的HTML文檔中。對應的語句也就是main.js文件中的語句。
new Vue({ // 該屬性會 將Vue實例掛載到 真實的HTML中 el: '#app', // App 就是根組件，被掛載到Vue實例中 render: h => h(App)})越寫到后面感覺越偏離主題（不知所云，看來得好好練一下文筆了），實在寫不出想要的那種效果，所以就先到此為止吧。先整理一下思路，后面有時間會接著更新，希望自己會堅持下去，這是第一篇。
關注我，獲取前端更多技術文章！
