乐趣区

关于前端:Vue深入学习2虚拟DOM和Diff算法

jiezi

1、snabbdom 是什么？

snabbdom 是“速度 ” 的意思，源码只有 200 行，应用 TS 写的，让货色变得模块化。

2、snabbdom 的 h 函数如何工作？

h 函数用于产生虚构节点，同时也能够嵌套应用，失去虚构 DOM 树。

3、什么是虚构 DOM?

实际上它对实在 DOM 的形象后果，是 JS 和实在 DOM 之间的一个缓存，原生 DOM 运行慢，将 DOM 放在 JS 层，进步渲染性能。

​ 3.1、创立一个虚构 DOM

// 实在 DOM
<ul id='list'>
      <li class='item'>Item 1</li>
      <li class='item'>Item 2</li>
      <li class='item'>Item 3</li>
</ul>
// 虚构 DOM
 var element = {
        tagName: 'ul', // 节点标签名
        props: { // DOM 的属性，用一个对象存储键值对
            id: 'list'
        },
        children: [ // 该节点的子节点
          {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
          {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
          {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
        ]
  }

​ 3.2、patch 函数源码流程图

// 手写 patch.js
export default function(oldVnode, newVnode){
    // 1、判断传入的第一个参数，是 DOM 节点还是虚构节点？if(oldValue.sel == '' || oldValue.sel == undefined){
        // 2、传入的第一个参数是 DOM 节点，包装成虚构节点
        oldValue = vnode(oldValue.tagName.toLowerCase(), {}, [], undefined, oldValue);
    }
    // 3、判断 oldValue 和 newValue 是否为同一节点？if(oldValue.key == newValue.kee && oldValue.sel == newValue.sel){console.log('是同一个节点');
        // 3.1、判断新旧 vnode 是否为同一个对象
        if(oldValue == newValue) return;
        // 3.2、判断新旧 vnode 有没有 text 属性
        if(newValue.text != undefined && (newValue.children == undefined || newValue.children.length == 0)){console.log('新 vnode 有 text 属性');
            // 3.2.1、如果新虚构节点中的 text 和老的虚构节点的 text 不同，那么间接让新的 text 写入老的 elm 中。如果老的 elm 中的 chilren, 那么也会立刻消失掉。if(newValue.text != oldValue.text){oldValue.elm.innerHTML = newValue.text;}
        }else {
            // 新 vnode 没有 text 属性，有 chidren
            console.log('新的 vnode 没有 text 属性');
            // 3.2.2、判断老的有咩有 children
            if(oldValue.children != undefined && oldVlaue.children > 0){
                // 3.2.2.1、老节点有 children
                let ch = newVnode.children[i];
                // 3.2.2.2、再次遍历，看看 oldValue 中有没有节点和他是 same 的
                let isExist = false;
                for(let j = 0; j < oldValue.children.length; j++){if(oldValue.children[j].sel == ch.sel && oldValue.children[j].key == ch.key){isExist = true;}
                }
                if(!isExist){console.log(ch, i);
                    let dom = createElement(ch);
                    ch.elm = dom;
                }
            }else{
                // 3.2.2.3、老节点没有 chidlren
                // 3.2.2.4、清空老节点内容
                oldValue.elm.innerHTML = '';
                // 3.2.2.5、遍历新的 vnode 子节点，创立 DOM，上树
                for(let i = 0; i < newVnode.children.length; i++){let dom = createElement(newVnode.children[i]);
                    oldVnode.elm.appendChild(dom);
                }
            }
        }
    }else{console.log('不是同一个节点')
        let newVnoElm = createElement(newVnode);
        // 4、插入到老节点之前
        oldValue.elm.parentNode.insertBefore(newVnodeElm, oldVnode.elm);
    }
}

4、diff 算法原理

  • 只比照 父节点 雷同的新旧子节点（Vnode）, 工夫复杂度 O(n)
  • 在比拟过程中，循环从两边向两头合拢。

​ 4.1、diff 是产生在虚构 DOM 上的，用来计算两个虚构 DOM 的差别，并从新熏染。

// 创立 patch 函数
const patch = init([classModule, propsModule, styleModule, eventListenersModule]);

// 创立虚构节点
const myVirtual2 = h('ul',{},[h('li',{key:'A'},'A'),
    h('li',{key:'B'},'B'),
    h('li',{key:'C'},'C'),
    h('li',{key:'D'},'D'),
]);
// 上树
patch(container, myVirtual2);

// 创立替换节点
const myVirtual3 = h('ul',{},[h('li',{key:'D'},'D'),
    h('li',{key:'A'},'A'),
    h('li',{key:'B'},'B),
    h('li',{key:'C'},'C'),
    h('li',{key:'D'},'D'),
]);

4.3、diff 算法新旧节点比照的过程？

①先借助 key 值找到 不须要挪动 的雷同节点。

②再找到雷同的节点，进行 挪动。

③找不到的，才会 新建删除 节点，保底解决。

4.3、Diff 值得注意的中央：

  • Diff 算法更改前后是同一个 DOM 节点
  • 选择器、key 雷同则判断为同一个节点。
  • 只进行同层比拟，不会跨层比拟。
退出移动版