您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Vue中Virtual DOM和Diff原理及實(shí)現(xiàn)方法是什么”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
vdom即虛擬DOM,將DOM映射為JS對(duì)象,結(jié)合diff算法更新DOM
以下為DOM
<div id="app"> <div class="home">home</div> </div>
映射成VDOM
{ tag: 'div', attrs: { id: 'app' }, children: [ { tag: 'div', attrs: { class: 'home' }, children: [ { tag: undefined, attrs: undefined, text: 'home', children: undefined } ] } ] }
通過這個(gè)vdom實(shí)現(xiàn)簡(jiǎn)單的render
函數(shù),可以通過js操作修改dom
<template> <div id="app"> <div v-for="item in arr">{{ item.name }} : {{ item.id }}</div> </div> <button id="btn">reRender</button> </template>
let app = document.getElementById('app') let data = { arr: [ { name: 'a', id: 1 }, { name: 'b', id: 2 }, { name: 'c', id: 3 }, ] } function render(data) { app.innerHtml = '' let children = [] data.forEach(item => { let el = document.createElement("div") el.innerHtml = `${ item.name } : ${item.id}` app.appendChild(el) }) } // test render(data.arr) // 首次渲染 let btn = document.getElementById('btn') btn.onClick = () => { data.arr[2].id++ // 修改關(guān)聯(lián)數(shù)據(jù) render(data.arr) // 重新渲染:暴力刷新DOM,沒有diff,實(shí)際上只用更新最后一個(gè)div就行 }
使用snabbdom實(shí)現(xiàn)VDOM
snabbldom是簡(jiǎn)易實(shí)現(xiàn)vdom功能的庫,有兩個(gè)核心api:h函數(shù)和patch函數(shù)
h(tag, attrs, children) // 創(chuàng)建vnode patch(vnode, newVnode) // 對(duì)vnode進(jìn)行diff后掛載到真實(shí)dom上
結(jié)合h
和patch
實(shí)現(xiàn)render
渲染函數(shù)
let app = document.getElementById('app') let vnode; function render(data) { let newVnode = h('div', { class: 'wrap' }, data.forEach(item => { return h('div', {}, `${item.name} : ${item.id}`) }) ) patch(vnode, newVnode) vnode = newVnode } render(data.arr) // 首次渲染 let btn = document.getElementById('btn') btn.onClick = () => { data.arr[2].id++ // 修改關(guān)聯(lián)數(shù)據(jù) render(data.arr) // 重新渲染:在patch函數(shù)里經(jīng)過vdom的diff后再掛載到真實(shí)dom,這里只更新最后一個(gè)div }
為了盡量減少DOM操作,需要通過diff對(duì)比新舊vnode,針對(duì)更改的地方進(jìn)行更新DOM,而非替換整個(gè)DOM
大體思路為:
對(duì)新舊兩個(gè)節(jié)點(diǎn)調(diào)用patch
函數(shù)
進(jìn)來先判斷兩個(gè)節(jié)點(diǎn)是否為同一類型,具體是對(duì)比key
、tag
、data
等屬性
若不為同一類型,那么基于新節(jié)點(diǎn)創(chuàng)建dom之后作替換
若為同一類型,那么調(diào)用patchVnode
函數(shù)
進(jìn)來先判斷兩個(gè)節(jié)點(diǎn)是文本節(jié)點(diǎn)的話,那么就作文本內(nèi)容替換
否則判斷是否都有子節(jié)點(diǎn),都有的話調(diào)用updateChildren
函數(shù),通過首尾四個(gè)指針
對(duì)子節(jié)點(diǎn)數(shù)組進(jìn)行diff更新;若舊節(jié)點(diǎn)有子節(jié)點(diǎn),新節(jié)點(diǎn)沒有,這時(shí)就刪除子節(jié)點(diǎn);若舊節(jié)點(diǎn)無子節(jié)點(diǎn),新節(jié)點(diǎn)有,這時(shí)基于新節(jié)點(diǎn)創(chuàng)建dom作替換即可
通過createElment
函數(shù),將VDOM轉(zhuǎn)為真實(shí)DOM
function createElement(vnode) { if(vnode.text) return document.createTextNode(vnode) // 文本節(jié)點(diǎn) let { tag, attrs, children } = vnode let el = document.createElement(tag) // tag for(let key of attrs){ // attrs el.setAttribute(key, attrs[key]) } children.forEach(childVnode => { // children el.appendChild(createElement(childVnode)) }) vnode.el = el return el }
通過patch
函數(shù),執(zhí)行diff更新操作
判斷vnode
和newVnode
是否為同一類型節(jié)點(diǎn),是則繼續(xù)遞歸對(duì)比子節(jié)點(diǎn),否則直接替換
function patch(vnode, newVnode) { if (isSameNode(vnode, newVnode)) patchVnode(vnode, newVnode) else replaceVnode(vnode, newVnode) } function replaceVnode(vnode, newVnode) { let el = vnode.el // 舊節(jié)點(diǎn) let parentEl = api.getParentNode(el) // 獲取父節(jié)點(diǎn) api.insertBefore(parentEl, createElement(newVnode), api.getNextSibling(el)) // 插入新節(jié)點(diǎn) api.removeChild(parentEl, el) // 刪除舊節(jié)點(diǎn) } function isSameNode(vnode, newVnode) { return ( vnode.key == newVnode.key && // key是否相同 vnode.tag == newVnode.tag && // tag是否相同 isDef(vnode.data) == isDef(newVnode.data) // 是否都定義了data // &&... 其他條件 ) } function patchVnode(vnode, newVnode) { let el = newVnode.el = vnode.el // 獲取當(dāng)前舊節(jié)點(diǎn)對(duì)應(yīng)的dom,并賦值給新節(jié)點(diǎn)的el // 1.都為文本節(jié)點(diǎn),且文本不一樣 if (vnode.text && newVnode.text && vnode.text != newVnode.text) return api.setElText(el, newVnode.text) // 替換文本 let ch = vnode.children let newCh = newVnode.children if (ch && newCh) return updateChildren(el, ch, newCh) // 2.都有子節(jié)點(diǎn),遞歸對(duì)比 if (ch) return api.removeChild(el) // 3.vnode有子節(jié)點(diǎn),newVnode無,刪除子節(jié)點(diǎn) return replaceVnode(vnode, newVnode) // 4. newNode有子節(jié)點(diǎn),vnode無,替換即可 }
updateChildren
實(shí)現(xiàn)比較復(fù)雜,使用首尾四指針
進(jìn)行vnode
和newVnode
的對(duì)比
function updateChildren(el, ch, newCh) { // 子節(jié)點(diǎn)下標(biāo) let l = 0 let r = ch.length - 1 let newL = 0 let newR = newCh.length - 1 // 子節(jié)點(diǎn) let lNode = ch[l] let rNode = ch[r] let newLNode = newCh[newL] let newRNode = newCh[newR] while (l <= r && newL <= newR) { if (!lNode || !rNode || !newLNode || !newRNode) { // 邊界處理 if (!lNode) lNode = ch[++l] if (!rNode) rNode = ch[--r] if (!newLNode) newLNode = newCh[++newL] if (!newRNode) newRNode = newCh[--newR] continue } // 新舊子節(jié)點(diǎn)首尾指針對(duì)比 l*newL、r*newR、l*newR、r*newL if (isSameNode(lNode, newLNode)) { patchVnode(lNode, newLNode) lNode = ch[++l] newLNode = newCh[++newL] continue } if (isSameNode(rNode, newRNode)) { patchVnode(rNode, newRNode) rNode = ch[--r] newRNode = newCh[--newR] continue } if (isSameNode(lNode, newRNode)) { patchVnode(lNode, newRNode) api.insertBefore(el, lNode.el, api.nextSibling(rNode.el)) lNode = ch[++l] newRNode = newCh[--newR] continue } if (isSameNode(rNode, newLNode)) { patchVnode(rNode, newLNode) api.insertBefore(el, rNode.el, lNode.el) rNode = ch[--r] newLNode = newCh[++newL] continue } // 在vnode未知序列區(qū)間[l,r]生成key-idx的map表,用newLNode的key在未知序列中找到可復(fù)用的位置 if (!keyIdxMap) keyIdxMap = getKeyIdxMap(ch, l, r) // map keyIdx = keyIdxMap.get(newLNode.key) if (!keyIdx) { api.insertBefore(el, createElement(newLNode), lNode.el) } else { let nodeToMove = ch[keyIdx] patchVnode(nodeToMove, newLNode) api.insertBefore(el, nodeToMove.el, lNode.el) } newLNode = newCh[++newL] } } function getKeyIdxMap(ch, l, r) { let map = new Map() while (l <= r) map.set(ch[l].key, l++) return map }
“Vue中Virtual DOM和Diff原理及實(shí)現(xiàn)方法是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。