## 源碼解析 http://hcysun.me/vue-design/art/1start-learn.html ## [MVVM實現雙向綁定](http://www.hmoore.net/sxlcjqq/interviews/768359)   已經了解到vue是通過數據劫持的方式來做數據綁定的， 其中最核心的方法便是通過Object.defineProperty()來實現對屬性的劫持， 達到監聽數據變動的目的 [剖析Vue原理&實現雙向綁定MVVM](https://segmentfault.com/a/1190000006599500) ## 虛擬DOM 虛擬dom就是解決這個問題的一個思路，到底什么是虛擬dom呢？ 通俗易懂的來說就是用一個簡單的對象去代替復雜的dom對象。 舉個簡單的例子，我們在體里插入一個類為一個DIV的。 var mydiv = document。createElement（' div '）; mydiv。className = ' a ' ; document.body.appendChild（mydiv）; 對于這個DIV可以我們用一個簡單的對象mydivVirtual代表它， 它存儲了對應DOM的一些重要參數，在改變DOM之前， 會先比較相應虛擬DOM的數據，如果需要改變，才會將改變應用到真實的DOM上。 //偽代碼 var mydivVirtual = { tagName ： ' DIV '， className ： ' a ' }; var newmydivVirtual = { tagName ： ' DIV '， className ： ' b ' } if（mydivVirtual.tagName ！== newmydivVirtual.tagName || mydivVirtual.className !== newmydivVirtual.className）{ change（mydiv） } //會執行相應的修改mydiv.className ='b'; //最后<div class ='b'> </ div> 很多時候手工優化dom確實會比virtual dom效率高，對于比較簡單的dom結構用手工優化沒有問題， 但當頁面結構很龐大，結構很復雜時，手工優化會花去大量時間，而且還維護性也不高， 不能保證每個人都有手工優化的能力。至此，虛擬DOM的解決方案應運而生，虛擬DOM很多時候都不是最優的操作， 但它具有普適性，在效率，可維護性之間達平衡。 虛擬dom另一個重大意義就是提供一個中間層，js去寫ui，ios安卓之類的負責渲染，就像reactNative一樣。 ### Diff算法 ：差異的過程就是調用補丁函數，就像打補丁一樣修改真實DOM。