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