Vue深入学习2—虚拟DOM和Diff算法

1、snabbdom 是什么？

snabbdom是“速度"的意思，源码只有200行，使用TS写的，让东西变得模块化

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

h函数用于产生虚拟节点，同时也可以嵌套使用，得到虚拟DOM树，

3、什么是虚拟DOM?

一个js对象描述DOM 的层次结构，用对象属性来描述节点，实际上它对真实DOM的抽象结果，本质上就是JS和真实DOM之间的一个缓存，原生DOM运行慢，将DOM放在JS层，提高渲染性能。

3.1、创建一个虚拟DOM

<ul id='list'>
      <li class='item'>Item 1</li>
      <li class='item'>Item 2</li>
      <li class='item'>Item 3</li>
</ul>

 var element = {
        tagName: 'ul', 
        props: { 
            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函数源码流程图

export default function(oldVnode, newVnode){
    
    if(oldValue.sel == '' || oldValue.sel == undefined){
        
        oldValue = vnode(oldValue.tagName.toLowerCase(), {}, [], undefined, oldValue);
    }
    
    if(oldValue.key == newValue.kee && oldValue.sel == newValue.sel){
        console.log('是同一个节点');
        
        if(oldValue == newValue) return;
        
        if(newValue.text != undefined && (newValue.children == undefined || newValue.children.length == 0)){
            console.log('新vnode有text属性');
            
            if(newValue.text != oldValue.text){
                oldValue.elm.innerHTML = newValue.text;
            }
        }else {
            
            console.log('新的vnode没有text属性');
            
            if(oldValue.children != undefined && oldVlaue.children > 0){
                
                let ch = newVnode.children[i];
                
                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{
                
                
                oldValue.elm.innerHTML = '';
                
                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);
        
        oldValue.elm.parentNode.insertBefore(newVnodeElm, oldVnode.elm);
    }
}

4、diff 算法原理

• 只对比父节点相同的新旧子节点（Vnode）,时间复杂度O(n)

• 在比较过程中，循环从两边向中间合拢。

4.1、diff是发生在虚拟DOM上的，用来计算两个虚拟DOM的差异，并重新熏染。

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相同则判断为同一个节点。

• 只进行同层半价，不会跨层比较。

参考：https://segmentfault.com/a/1190000020663531

https://juejin.cn/post/6921911974611664903