摘要：這里借鑒了一下的處理方式，我們把多帶帶模塊的包裝成一個(gè)函數(shù)，提供一個(gè)全局的回調(diào)方法，加載完成時(shí)候再調(diào)用回調(diào)函數(shù)。

感謝本文引用鏈接的各位大佬們，小菜鳥我只是個(gè)搬運(yùn)工

vue是數(shù)據(jù)、視圖分離的一個(gè)框架，讓數(shù)據(jù)與視圖間不會發(fā)生直接聯(lián)系。MVVM

組件化：把整體拆分為各個(gè)可以復(fù)用的個(gè)體

數(shù)據(jù)驅(qū)動：通過數(shù)據(jù)變化直接影響bom展示，避免dom操作。

可以在原項(xiàng)目的基礎(chǔ)上，一兩個(gè)組件使用vue，也可以使用vue全家桶開發(fā)

全家桶：vue-router，vuex， vue-resource，vue-cli，sass樣式
這篇文章關(guān)于漸進(jìn)式的解釋很好
vue中幾個(gè)必須要知道的點(diǎn)

一張圖總結(jié)vue生命周期

需注意created時(shí)data已綁定，但DOM未生成，$el不存在，mounted時(shí)$el已存在，可以掛載。
這篇文章對vue的生命周期寫的很細(xì)致，而且有代碼可以手動驗(yàn)證每個(gè)階段

雙向綁定就在單向綁定的基礎(chǔ)上給可輸入元素（input、textare等）添加了change(input)事件，來動態(tài)修改model和 view
實(shí)現(xiàn)流程：

實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽器Observer，能夠?qū)?shù)據(jù)對象的所有屬性進(jìn)行監(jiān)聽，如有變動可拿到最新值并通知訂閱者

實(shí)現(xiàn)一個(gè)指令解析器Compile，對每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)

實(shí)現(xiàn)一個(gè)Watcher，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個(gè)屬性變動的通知，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)，從而更新視圖

mvvm入口函數(shù)，整合以上三者

點(diǎn)我查看大佬文章1
點(diǎn)我查看大佬文章2

為什么要減少DOM操作，DOM操作的時(shí)間耗在了哪里？

渲染引擎工作：

解析HTML代碼，生產(chǎn)DOM tree

解析CSS樣式，結(jié)合DOM tree生產(chǎn)Render tree（display: none;的結(jié)點(diǎn)不會存在Rendertree上，最后不會被paint）

計(jì)算Render tree各個(gè)節(jié)點(diǎn)的布局信息，比如box的位置、尺寸、顏色、外形等

根據(jù)計(jì)算后的布局信息，調(diào)用瀏覽器的UI引擎進(jìn)行渲染。

而操作dom會產(chǎn)生幾種動作，極大的影響渲染的效率。其中 layout（布局）和paint（繪制）是最大的。

layout 就是布局變動造成重新計(jì)算（耗CPU，有時(shí)也很耗內(nèi)存）

paint 就是調(diào)用瀏覽器UI引擎進(jìn)行渲染展示頁面（耗CPU和內(nèi)存）

參考這一篇，講的很詳細(xì)

Virtual DOM算法的步驟如下：

用 JavaScript 對象結(jié)構(gòu)表示 DOM 樹的結(jié)構(gòu)；

然后用這個(gè)樹構(gòu)建一個(gè)真正的 DOM 樹，插到文檔當(dāng)中當(dāng)狀態(tài)變更的時(shí)候，重新構(gòu)造一棵新的對象樹。

然后用新的樹和舊的樹進(jìn)行比較，記錄兩棵樹差異把2所記錄的差異應(yīng)用到步驟1所構(gòu)建的真正的DOM樹上，視圖就更新了

如何理解虛擬DOM? - 戴嘉華的回答 - 知乎

虛擬DOM先是用js模擬dom，主要是使用el

然后是對比虛擬的dom樹節(jié)點(diǎn)的不同，主要用的是深搜

比較兩棵虛擬樹的差異用的是diff算法，核心是深搜，首先對比DOM樹中每層的差異，并標(biāo)記進(jìn)行差異，然后使用類似動態(tài)規(guī)劃來求出最小編輯距離

聲明式渲染

命令式渲染 ： 命令我們的程序去做什么，程序就會跟著你的命令去一步一步執(zhí)行

聲明式渲染 ： 我們只需要告訴程序我們想要什么效果，其他的交給程序來做。

這篇文章里不僅有聲明式渲染，還介紹了vue中基本內(nèi)容

前端中的路由有兩種實(shí)現(xiàn)方式，一種html5的，另一種就是vue的hashhash路由，就是常見的 # 號，這種方式兼容性更好。

切換頁面：路由的最大作用就是切換頁面，以往后臺的路由是直接改變了頁面的url方式促使頁面刷新。但是前端路由通過 #號不能刷新頁面，只能通過 window 的監(jiān)聽事件 hashchange 來監(jiān)聽hash的變化，然后捕獲到具體的hash值進(jìn)行操作，手動下載js

注冊路由：我們需要把路由規(guī)則注冊到頁面，這樣頁面在切換的時(shí)候才會有不同的效果。

異步加載js：一般單頁面應(yīng)用為了性能優(yōu)化，都會把各個(gè)頁面的文件拆分開，按需加載，所以路由里面要加入異步加載js文件的功能。異步加載我們就采用最簡單的原生方法，創(chuàng)建script標(biāo)簽，動態(tài)引入js。

參數(shù)傳遞：在我們動態(tài)引入多帶帶模塊的js之后，我們可能需要給這個(gè)模塊傳遞一些多帶帶的參數(shù)。這里借鑒了一下jsonp的處理方式，我們把多帶帶模塊的js包裝成一個(gè)函數(shù)，提供一個(gè)全局的回調(diào)方法，加載完成時(shí)候再調(diào)用回調(diào)函數(shù)。

流程：

來自這篇文章，講的很細(xì)致
這個(gè)也作為參考，代碼簡單一些，但和上一篇略有不同

挺好理解的，就是創(chuàng)建一個(gè)中央事件總線做為通信橋梁，需要傳值的組件中用bus.$emit觸發(fā)一個(gè)自定義事件，并傳遞參數(shù)，在需要接收數(shù)據(jù)的組件中用bus.$on監(jiān)聽自定義事件，并在回調(diào)函數(shù)中處理傳遞過來的參數(shù)
平級組件通信
父子組件通信