vue2.0的虛擬DOM渲染思路分析
1、為什么需要虛擬DOM
前面我們從零開始寫了一個(gè)簡(jiǎn)單的類Vue框架(文章鏈接),其中的模板解析和渲染是通過(guò)Compile函數(shù)來(lái)完成的,采用了文檔碎片代替了直接對(duì)頁(yè)面中DOM元素的操作,在完成數(shù)據(jù)的更改后通過(guò)appendChild函數(shù)將真實(shí)的DOM插入到頁(yè)面。
雖然采用的是文檔碎片,但是操作的還是真實(shí)的DOM。
而我們知道操作DOM的代價(jià)是昂貴的,所以vue2.0采用了虛擬DOM來(lái)代替對(duì)真實(shí)DOM的操作,最后通過(guò)某種機(jī)制來(lái)完成對(duì)真實(shí)DOM的更新,渲染視圖。
所謂的虛擬DOM,其實(shí)就是 用JS來(lái)模擬DOM結(jié)構(gòu),把DOM的變化操作放在JS層來(lái)做,盡量減少對(duì)DOM的操作 (個(gè)人認(rèn)為主要是因?yàn)椴僮鱆S比操作DOM快了不知道多少倍,JS運(yùn)行效率高)。然后對(duì)比前后兩次的虛擬DOM的變化,只重新渲染變化了的部分,而沒(méi)有變化的部分則不會(huì)重新渲染。
比如我們有如下的DOM結(jié)構(gòu)。
<ul id="list"> <li class="item1">Item 1</li> <li class="item2">Item 2</li> </ul>
我們完全可以用JS對(duì)象模擬上面的DOM結(jié)構(gòu),模擬后就會(huì)變成下面的這種結(jié)構(gòu)。
var vdom = { tag: 'ul', attr: { id: 'list', }, children: [ { tag: 'li', attrs: { className: 'item', children: ['Item 1'] }, }, { tag: 'li', attrs: { className: 'item', children: ['Item 2'] } } ] }
必須要注意一點(diǎn)的是:JS模擬的DOM結(jié)構(gòu)并沒(méi)有模擬所有DOM節(jié)點(diǎn)上的屬性、方法(因?yàn)镈OM節(jié)點(diǎn)本身的屬性非常多,這也是DOM操作耗性能的一個(gè)點(diǎn)),而是只模擬了一部分和數(shù)據(jù)操作相關(guān)的屬性和方法。
2、怎么使用虛擬DOM
Vue 在 2.0 版本引入了 vdom 。其 vdom 是基于 snabbdom 庫(kù)所做的修改。snabbdom是一個(gè)開源的vdom庫(kù)。
snabbdom的主要作用就是 將傳入的JS模擬的DOM結(jié)構(gòu)轉(zhuǎn)換成虛擬的DOM節(jié)點(diǎn)。
先通過(guò)其中的h函數(shù)將JS模擬的DOM結(jié)構(gòu) 轉(zhuǎn)換成虛擬DOM之后,再通過(guò)其中的patch函數(shù)將虛擬DOM轉(zhuǎn)換成真實(shí)的DOM渲染到頁(yè)面中。
為了保證頁(yè)面的最小化渲染,snabbdom引入了Diff算法 ,通過(guò)Diff算法找出前后兩個(gè)虛擬DOM之間的差異,只更新改變了的DOM節(jié)點(diǎn),而不重新渲染為改變的DOM節(jié)點(diǎn)。
在這里我不打算分析snabbdom的源碼來(lái)解釋到底snabbdom是怎么干成這件事的(主要是現(xiàn)階段沒(méi)到那個(gè)水平,哈哈。再者已經(jīng)有很多同學(xué)做過(guò)類似的分析,相關(guān)鏈接附在文章末尾)。
我會(huì)從snabbdom的使用角度來(lái)看Vue中的虛擬DOM是如何完成視圖渲染的。
我們先看一下snabbdom中兩個(gè)核心API的功能。
h()函數(shù):將傳入的JS模擬的DOM結(jié)構(gòu)模板轉(zhuǎn)換成vnode。(vnode是一個(gè)純JS對(duì)象)
patch()函數(shù):將虛擬的DOM節(jié)點(diǎn)渲染到頁(yè)面中。
我們提供一個(gè)實(shí)例來(lái)看一下snabbdom的實(shí)際作用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="container"></div> <button id="btn-change">change</button> <!-- 引入snabbdom庫(kù),先不必糾結(jié)為什么這樣引入,以及每個(gè)文件的作用。本篇文章只是介紹一下虛擬DOM的工作方式,并不涉及原理解析 主要是因?yàn)椴┲髂壳肮αι袦\,有興趣的小伙伴可以另行研究 --> <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script> <script> //定義patch函數(shù) var patch = snabbdom.init([ snabbdom_class, snabbdom_props, snabbdom_style, snabbdom_eventlisteners ]) //定義h函數(shù) var h = snabbdom.h; //生成一個(gè)vnode var vnode = h('ul#list',{},[ h('li.item',{},['Item 1']), h('li.item',{},['Item 2']), ]) //console.log(vnode); //獲取container var container = document.getElementById('container'); patch(container,vnode);//初次渲染 var btn = document.getElementById('btn-change'); btn.onclick = function() { var newVnode = h('ul#list',{},[ h('li.item',{},['Item 1']), h('li.item',{},['Item B']), h('li.item',{},['Item 3']), ]) patch(vnode,newVnode);//再次渲染 vnode = newVnode;//將修改后的newVnode賦值給vnode } </script> </body> </html>
思路分析:
- 我們先通過(guò)h函數(shù)創(chuàng)建一個(gè)虛擬DOM節(jié)點(diǎn),通過(guò)patch函數(shù)將虛擬DOM渲染到頁(yè)面。
- 點(diǎn)擊btn按鈕時(shí),更新ul#list列表的數(shù)據(jù),改變了第二個(gè)li元素的值并且新增了一個(gè)li元素,第一個(gè)li元素的值并沒(méi)有改變。我們?cè)俅瓮ㄟ^(guò)patch函數(shù)將更新后的數(shù)據(jù)渲染到頁(yè)面上??梢钥吹街挥械诙€(gè)和第三個(gè)li發(fā)生了更新,而第一個(gè)li由于沒(méi)有改變,并沒(méi)有重新渲染。
vue中的模板解析和渲染的核心就是:通過(guò)類似snabbdom的h()和patch()的函數(shù),先將模板解析成vnode,如果是初次渲染,則通過(guò)patch(container,vnode)將vnode渲染至頁(yè)面,如果是二次渲染,則通過(guò)patch(vnode,newVnode)
,先通過(guò)Diff算法比較原vnode和newVnode的差異,以最小的代價(jià)重新渲染頁(yè)面。
總結(jié)
以上所述是小編給大家介紹的vue2.0的虛擬DOM渲染思路分析,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
vue-cli3項(xiàng)目展示本地Markdown文件的方法
這篇文章主要介紹了vue-cli3項(xiàng)目展示本地Markdown文件的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06Vue項(xiàng)目本地沒(méi)有問(wèn)題但部署到服務(wù)器上提示錯(cuò)誤(問(wèn)題解決方案)
一個(gè) VUE 的項(xiàng)目在本地部署沒(méi)有問(wèn)題,但是部署到服務(wù)器上的時(shí)候提示訪問(wèn)資源的錯(cuò)誤,遇到這樣的問(wèn)題如何解決呢?下面小編給大家?guī)?lái)了Vue項(xiàng)目本地沒(méi)有問(wèn)題但部署到服務(wù)器上提示錯(cuò)誤的解決方法,感興趣的朋友一起看看吧2023-05-05詳解vue 動(dòng)態(tài)加載并注冊(cè)組件且通過(guò) render動(dòng)態(tài)創(chuàng)建該組件
這篇文章主要介紹了vue 動(dòng)態(tài)加載并注冊(cè)組件且通過(guò) render動(dòng)態(tài)創(chuàng)建該組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05SpringBoot+Vue項(xiàng)目線上買菜系統(tǒng)源碼展示
本線上買菜系統(tǒng)采用的數(shù)據(jù)庫(kù)是Mysql,使用springboot框架開發(fā)。在設(shè)計(jì)過(guò)程中,充分保證了系統(tǒng)代碼的良好可讀性、實(shí)用性、易擴(kuò)展性、通用性、便于后期維護(hù)、操作方便以及頁(yè)面簡(jiǎn)潔等特點(diǎn),需要的朋友可以參考下2022-08-08vue的diff算法知識(shí)點(diǎn)總結(jié)
本篇文章給大家分享了關(guān)于vue的diff算法的相關(guān)知識(shí)點(diǎn)總結(jié),有興趣的朋友參考學(xué)習(xí)下。2018-03-03關(guān)于ElementPlus中的表單驗(yàn)證規(guī)則詳解
這篇文章主要介紹了關(guān)于ElementPlus中的表單驗(yàn)證,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06基于Element封裝一個(gè)表格組件tableList的使用方法
這篇文章主要介紹了基于Element封裝一個(gè)表格組件tableList的使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06Vue頁(yè)面偶爾樣式錯(cuò)亂,刷新即恢復(fù)的問(wèn)題及解決
這篇文章主要介紹了Vue頁(yè)面偶爾樣式錯(cuò)亂,刷新即恢復(fù)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07