不再解釋什么是virtual dom了,爛大街了。
這里問題核心是vue本身具有數據綁定或者說數據劫持,我們的數據是對應著某個dom的某個屬性的。通過數據綁定,我們的數據可以“靶向”定位出具體哪個dom的哪個屬性,然后直接dom操作進行修改,何必搞什么virtual dom和diff,直接更新過去不就行了?
至于最小化操作,我們完全可以保留一份老數據,然后異步統一對比新老數據,有不同的就更新,也不需要diff啊?
知乎 Vue采用虛擬DOM的目的是什么?
vue是從2.0引入virtual dom的,那么首先看:
Announcing Vue.js 2.0
Vue 2.0 發布了!
Vue 的理念問題
從性能方面:
現在的渲染層基于一個輕量級的 virtual-DOM 實現,在大多數場景下初試化渲染速度和內存消耗都提升了 2~4 倍 (詳見這里的 benchmarks)。從模板到 virtual-DOM 的編譯器和運行時是可以獨立開來的,所以你可以將模板預編譯并只通過 Vue 的運行時讓你的應用工作起來,而這份運行時的代碼 min+gzip 之后只有不到 12kb (提一下,React 15 在 min+gzip 之后的大小是 44kb)。編譯器同樣可以在瀏覽器中工作,也就是說你也可以寫一段 script 標簽然后開始你的工作,就像以前一樣。而即便你把編譯器加進去,build 出來的文件 min+gzip 之后也僅有 17kb,仍然小于目前的 1.0 版本。
2.0 用一個 fork 自 snabbdom 的輕量 Virtual DOM 實現對渲染層進行了重寫。在其上層,Vue 的模板編譯器能夠在編譯時做一些智能的優化處理,例如分析并提煉出靜態子樹以避免界面重繪時不必要的比對。新的渲染層較之 v1 帶來了巨大的性能提升,也讓 Vue 2.0 成為了最快速的框架之一。除此之外,它把你在優化方面需要做的努力降到了最低,因為 Vue 的響應系統能夠在巨大而且復雜的組件樹中精準的判斷其中需要被重繪的那部分。
總的來說:體積不變多少,初始化渲染性能提升,內存占用減少。
1.體積不變暫且不說,初始化渲染提升、內存占用減少是為什么?
單文件vue的加入,編譯時便可依靠vdom把模板文件進行一定預編譯,無需如模板字符串template:"<div>...</div>"
等從零編譯,資源占用應當變少(好像不需要vdom也能這樣優化,會復雜了點...?)。
2.關于vdom多了diff的問題,vue并沒有拋棄自己響應式的根。憑借原有基礎vue的vdom實現具有自我特色,無需像react那樣搞什么shouldcomponentupdate來優化,vue自己就能較為精準避免不需要的diff,速度仍然很快(不用vdom根本不用diff...?)
3.又如列表方面,采用vdom可以提高復用真實dom。如解析vue2.0的diff算法,這里如果不采用vdom,單憑數據綁定作出的選擇就是直接新建、刪除已有節點
功能方面
最直接的就是多了render函數、支持了jsx、可以實現服務器渲染。除此之外還有更多的可擴展性和更高一層的抽象能力,而且很大可能是出于這部分考慮而非性能(反正事實證明比原來快,也沒毛病),引用作者尤雨溪部分原話:
Vue 2.0 引入 vdom 的主要原因是 vdom 把渲染過程抽象化了,從而使得組件的抽象能力也得到提升,并且可以適配 DOM 以外的渲染目標。這一點是借鑒 React 毫無爭議,因為我認為 vdom 確實是個好思想。