vue經常使用知識點總結

感謝本文引用連接的各位大佬們，小菜鳥我只是個搬運工

1.談一談你理解的vue是什麼樣子的？

1. vue是數據、視圖分離的一個框架，讓數據與視圖間不會發生直接聯繫。MVVM
2. 組件化：把總體拆分爲各個能夠複用的個體
3. 數據驅動：經過數據變化直接影響bom展現，避免dom操做。
4. 能夠在原項目的基礎上，一兩個組件使用vue，也可使用vue全家桶開發

全家桶：vue-router，vuex， vue-resource，vue-cli，sass樣式
這篇文章關於漸進式的解釋很好
vue中幾個必需要知道的點

2.vue生命週期

一張圖總結vue生命週期

需注意created時data已綁定，但DOM未生成，$el不存在，mounted時$el已存在，能夠掛載。
這篇文章對vue的生命週期寫的很細緻，並且有代碼能夠手動驗證每一個階段

3.v-model雙向數據綁定

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

1. 實現一個數據監聽器Observer，可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者
2. 實現一個指令解析器Compile，對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
3. 實現一個Watcher，做爲鏈接Observer和Compile的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數，從而更新視圖
4. mvvm入口函數，整合以上三者

點我查看大佬文章1
點我查看大佬文章2

4.虛擬DOM和聲明式渲染

• 爲何要減小DOM操做，DOM操做的時間耗在了哪裏？

渲染引擎工做：

1. 解析HTML代碼，生產DOM tree
2. 解析CSS樣式，結合DOM tree生產Render tree（display: none;的結點不會存在Rendertree上，最後不會被paint）
3. 計算Render tree各個節點的佈局信息，好比box的位置、尺寸、顏色、外形等
4. 根據計算後的佈局信息，調用瀏覽器的UI引擎進行渲染。

而操做dom會產生幾種動做，極大的影響渲染的效率。其中 layout（佈局）和paint（繪製）是最大的。

1. layout 就是佈局變更形成從新計算（耗CPU，有時也很耗內存）
2. paint 就是調用瀏覽器UI引擎進行渲染展現頁面（耗CPU和內存）

參考這一篇，講的很詳細

• Virtual DOM算法的步驟以下：

1. 用 JavaScript 對象結構表示 DOM 樹的結構；
2. 而後用這個樹構建一個真正的 DOM 樹，插到文檔當中當狀態變動的時候，從新構造一棵新的對象樹。
3. 而後用新的樹和舊的樹進行比較，記錄兩棵樹差別把2所記錄的差別應用到步驟1所構建的真正的DOM樹上，視圖就更新了

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

• 虛擬DOM先是用js模擬dom，主要是使用el
• 而後是對比虛擬的dom樹節點的不一樣，主要用的是深搜

比較兩棵虛擬樹的差別用的是diff算法，核心是深搜，首先對比DOM樹中每層的差別，並標記進行差別，而後使用相似動態規劃來求出最小編輯距離

• 聲明式渲染

1. 命令式渲染 ： 命令咱們的程序去作什麼，程序就會跟着你的命令去一步一步執行
2. 聲明式渲染 ： 咱們只須要告訴程序咱們想要什麼效果，其餘的交給程序來作。

這篇文章裏不只有聲明式渲染，還介紹了vue中基本內容

5.路由用原生js如何實現

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

1. 切換頁面：路由的最大做用就是切換頁面，以日後臺的路由是直接改變了頁面的url方式促使頁面刷新。可是前端路由經過 #號不能刷新頁面，只能經過 window 的監聽事件 hashchange 來監聽hash的變化，而後捕獲到具體的hash值進行操做，手動下載js
2. 註冊路由：咱們須要把路由規則註冊到頁面，這樣頁面在切換的時候纔會有不一樣的效果。
3. 異步加載js：通常單頁面應用爲了性能優化，都會把各個頁面的文件拆分開，按需加載，因此路由裏面要加入異步加載js文件的功能。異步加載咱們就採用最簡單的原生方法，建立script標籤，動態引入js。
4. 參數傳遞：在咱們動態引入單獨模塊的js以後，咱們可能須要給這個模塊傳遞一些單獨的參數。這裏借鑑了一下jsonp的處理方式，咱們把單獨模塊的js包裝成一個函數，提供一個全局的回調方法，加載完成時候再調用回調函數。

流程：

來自這篇文章，講的很細緻
這個也做爲參考，代碼簡單一些，但和上一篇略有不一樣

6.vue中組件通訊

挺好理解的，就是建立一箇中央事件總線作爲通訊橋樑，須要傳值的組件中用bus.$emit觸發一個自定義事件，並傳遞參數，在須要接收數據的組件中用bus.$on監聽自定義事件，並在回調函數中處理傳遞過來的參數
平級組件通訊
父子組件通訊