Vue源码分析系列四：Virtual DOM
生活随笔
收集整理的這篇文章主要介紹了
Vue源码分析系列四：Virtual DOM
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
前言
當(dāng)我們操作Dom其實(shí)是一件非常耗性能的事，每個(gè)元素都涵蓋了許多的屬性，因?yàn)闉g覽器的標(biāo)準(zhǔn)就把 DOM 設(shè)計(jì)的非常復(fù)雜。而Virtual Dom就是用一個(gè)原生的JS對象去描述一個(gè)DOM節(jié)點(diǎn)，即VNode，所以它比創(chuàng)建一個(gè)真實(shí)的Dom元素所產(chǎn)生代價(jià)要小得多。而我們主流的框架React和Vue正是采用了這種做法，那我們來看下如何實(shí)現(xiàn)一個(gè)簡單的Virtual Dom。完整代碼GitHub。喜歡的話希望點(diǎn)個(gè)小星星哦 ^_^~~~
核心
構(gòu)建vDOM
首先我們需要構(gòu)建vDom, 用js對象來描述真正的dom tree,構(gòu)建好了vDom之后就需要將其render到我們的頁面上了
// createElement.js// give some default value. export default (tagName, {attrs = {}, children = []} = {}) => {return {tagName,attrs,children} }// main.jsimport createElement from './vdom/createElement'const createVApp = (count) => createElement('div', {attrs: {id: 'app',dataCount: count},children: [createElement('input'), // dom重繪使得Input失焦String(count), // 文本節(jié)點(diǎn)createElement('img', {attrs: {src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555610261877&di=6619e67b4f45768a359a296c55ec1cc3&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2Fmr7DezX-Q4GLNBM_VPVaWA%3D%3D%2F333829322379622331.jpg'}})] })let count = 0; let vApp = createVApp(count);復(fù)制代碼下面這個(gè)就是構(gòu)建的 vDom 啦！
然后我我們看看render 方法，這個(gè)方法就是將我們的 vDom 轉(zhuǎn)化成真是的 element.
// render.jsconst renderElem = ({ tagName, attrs, children}) => {// create root elementlet $el = document.createElement(tagName);// set attributedsfor (const [k, v] of Object.entries(attrs)) {$el.setAttribute(k, v);}// set children (Array)for (const child of children) {const $child = render(child);$el.appendChild($child);}return $el; }const render = (vNode) => {// if element node is text, and createTextNodeif (typeof vNode === 'string') {return document.createTextNode(vNode);}// otherwise return renderElemreturn renderElem(vNode); }export default render復(fù)制代碼然后我們回到main.js中
// 引入 render.js 模塊const $app = render(vApp); // 開始構(gòu)建真實(shí)的domlet $rootEl = mount($app, document.getElementById('app'));// 創(chuàng)建 mount.jsexport default ($node, $target) => {// use $node element replace $target element!$target.replaceWith($node);return $node; } 復(fù)制代碼最后你就可以看到效果了. 是不是很帥 ? O(∩_∩)O哈哈 ~~~~
現(xiàn)在我們來做一些好玩的事兒。回到 main.js 中，我們加入如下這段代碼:
setInterval(() => {count++;$rootEl = mount(render(createVApp(count)), $rootEl); // $rootEl 就是整顆real dom }, 1000) 復(fù)制代碼然后回到我們的頁面，發(fā)現(xiàn)什么了嗎? 你可以嘗試在 input 里面輸入一些東西，然后發(fā)現(xiàn)了什么異常了嗎 ?
查看源代碼，原來，每隔一秒我們就刷新了一次頁面。可是我們只改變了 count ，就重繪一次頁面，未免也夸張了吧，假如我們填寫一個(gè)表單，填的手都要斷了，結(jié)果刷新了頁面，你猜會怎么著? 會不會想砸電腦呢 ? 別急，diff 算法能幫我們解決這給令人頭疼的問題 !
diff
diff 算法的概念我就在這兒就不介紹了，大家可以在網(wǎng)上搜到很多答案。直接上代碼 !
// diff.jsimport render from './render'const zip = (xs, ys) => {const zipped = [];for (let i = 0; i < Math.min(xs.length, ys.length); i++) {zipped.push([xs[i], ys[i]]);}return zipped; };const diffAttributes = (oldAttrs, newAttrs) => {const patches = [];// set new attributes// oldAttrs = {dataCount: 0, id: 'app'}// newAttrs = {dataCount: 1, id: 'app'}// Object.entries(newAttrs) => [['dataCount', 1], ['id', 'app']]for(const [k, v] of Object.entries(newAttrs)) {patches.push($node => {$node.setAttribute(k, v);return $node;})}// remove old attributefor(const k in oldAttrs) {if (!(k in newAttrs)) {// $node 是整顆真實(shí)的 dom treepatches.push($node => {$node.removeAttribute(k);return $node;}) }}return $node => {for (const patch of patches) {patch($node);}} }const diffChildren = (oldVChildren, newVChildren) => {const childPatches = [];for (const [oldVChild, newVChild] of zip(oldVChildren, newVChildren)) {childPatches.push(diff(oldVChild, newVChild));}const additionalPatches = [];for (const additionalVChild of additionalPatches.slice(oldVChildren.length)) {additionalPatches.push($node => {$node.appendChild(render(additionalVChild));return $node;})}return $parent => {for (const [patch, child] of zip(childPatches, $parent.childNodes)) {patch(child);}for (const patch of additionalPatches) {patch($parent);}return $parent;} }const diff = (vOldNode, vNewNode) => {// remove allif (vNewNode === 'undefined') {return $node => {// Node.remove() 方法，把對象從它所屬的DOM樹中刪除。$node.remove();return undefined;};}// when element is textnode (like count)if (typeof vOldNode === 'string' || typeof vNewNode === 'string') {if (vOldNode !== vNewNode) {return $node => {const $newNode = render(vNewNode);$node.replaceWith($newNode);return $newNode;};} else {return $node => undefined;}}if (vOldNode.tagName !== vNewNode.tagName) {return $node => {const $newNode = render(vNewNode);$node.replaceWith($newNode);return $newNode;};}const patchAttrs = diffAttributes(vOldNode.attrs, vNewNode.attrs);const patchChildren = diffChildren(vOldNode.children, vNewNode.children);return $node => {patchAttrs($node);patchChildren($node);return $node;}; };export default diff;// main.js setInterval(() => {count++;// 每隔一秒，重繪一次頁面，input失焦(缺點(diǎn))// $rootEl = mount(render(createVApp(count)), $rootEl)// 衍生出 diff 算法const vNewApp = createVApp(count); // 新的 vDomconst patch = diff(vApp, vNewApp); // 對比差異$rootEl = patch($rootEl);vApp = vNewApp; // 每一秒之后都有更新，保存起來以供下次比對。 }, 1000) 復(fù)制代碼廢話少說，先看效果 (: ~~
可以發(fā)現(xiàn)，input 沒有情況，也就是說頁面沒有刷新，setInterval每次將count++, 頁面上也只更新了變化了的屬性以及文本，這就是diff算法的威力。
分析一波
- diff
diff 函數(shù)接收兩個(gè)參數(shù)，vOldNode 和 vNewNode.
- diffAttributes
比對屬性好辦，就是拿到新的 vDom 的屬性，然后遍歷老的 vDom 的屬性，判斷老的 vDom 的屬性是否存在于新的 vDom 中。關(guān)鍵點(diǎn)我將它描述出來
- diffChildren
最后就是要對比 children 了。
結(jié)語
Virtual DOM 最核心的部分就是 diff 算法了，這里還是比較復(fù)雜的，需要多加練習(xí)反復(fù)琢磨，好了，今天的介紹就到這了，如果喜歡你就點(diǎn)點(diǎn)贊哦 !
總結(jié)
以上是生活随笔為你收集整理的Vue源码分析系列四：Virtual DOM的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 全战三国太守有什么用 三国》凉了吗
- 下一篇： Vue-Cleave - 在Vue中使用