Vue源码学习之虚拟Dom与Diff算法

饭饭欧尼酱 · 发表于 2022-7-20 09:43:38

本帖最后由饭饭欧尼酱于 2022-7-20 09:47 编辑

什么是Diff算法？

diff算法实现精细化对比，实现量小化精细更新
举个栗子：

什么是虚拟DOM？

首先我们要知道什么是真实DOM
举个栗子：

  <div>
        <h1>我是一个标题</h1>
        <ul>
            <li>牛奶</li>
            <li>咖啡</li>
            <li>可乐</li>
        </ul>
    </div>

那有很多人疑问什么是虚拟DOM
再举个栗子：

{
    "sel": "div",
    "data": {
            "class": { "box": true}
            },
    "children": [ 
        {
            "sel": "h3",
            "data": {},
            "text": "我是一个标题"
        },
    {
        "sel": "ul",
        "data": {},
        "children": [   
                  { "sel": "li", "data": {}, "text": "牛奶" },
                  { "sel": "li", "data": {}, "text": "咖啡" },
                  { "sel": "li", "data": {}, "text": "可乐" } 
                    ]
                  }
               ]
   }

DIff算法是如何更新在虚拟DOM上面呢？

 "sel": "div",
    "data": {
            "class": { "box": true}
            },
    "children": [ 
        {
            "sel": "h3",
            "data": {},
            "text": "我是一个标题"
        },
    {
        "sel": "ul",
        "data": {},
        "children": [   
                  { "sel": "li", "data": {}, "text": "牛奶" },
                  { "sel": "li", "data": {}, "text": "咖啡" },
                  { "sel": "li", "data": {}, "text": "可乐" } 
                    ]
                  }
               ]
   }

 "sel": "div",
    "data": {
            "class": { "box": true}
            },
    "children": [ 
        {
            "sel": "h3",
            "data": {},
            "text": "我是一个标题"
        }, 
        {
            "sel": "span",
            "data": {},
            "text": "我是一个新的span"
        }
    {
        "sel": "ul",
        "data": {},
        "children": [   
                  { "sel": "li", "data": {}, "text": "牛奶" },
                  { "sel": "li", "data": {}, "text": "咖啡" },
                  { "sel": "li", "data": {}, "text": "可乐" },
                  { "sel": "li", "data": {}, "text": "雪碧" } 
                    ]
                  }
               ]
   }

不知道大家通过以上代码有没有发现精细化更新呢？
简单来说就是新虚拟DOM和旧虚拟DOM进行diff(精细化比较)，算出应该如何最小量更新，最后反映到真正的DOM上