Vue2 虚拟Dom和Diff算法-一一网

什么是虚拟Dom:

通过一个对象去保存和记录页面真实Dom节点,当我们的页面发生变化时,会生成对应的新的虚拟Dom,新的虚拟Dom则会和旧的虚拟Dom进行比对,如果对比发现旧的虚拟Dom和新的虚拟Dom之间发生了变化,则新的虚拟Dom则会替换到旧的虚拟Dom,同时在页面生成新的真实Dom

虚拟Dom的表现形式

    const nodeDom = {
      "sel": "div",
      "data": {
        "class": { "box": true }
      },
      "children": [
        {
          "sel": "span",
          "data": {},
          "text": "我是文字"
        },
        {
          "sel": "ul",
          "data": {},
          "children": [
            { "sel": "li", "data": {}, "text": "苹果" },
            { "sel": "li", "data": {}, "text": "香蕉" },
            { "sel": "li", "data": {}, "text": "柠檬" }
          ]
        }
      ]
    }
复制代码

如果此时我们在ul中新插入一条信息则新的虚拟Dom的表现形式为:

    const nodeDom = {
      "sel": "div",
      "data": {
        "class": { "box": true }
      },
      "children": [
        {
          "sel": "span",
          "data": {},
          "text": "我是文字"
        },
        {
          "sel": "ul",
          "data": {},
          "children": [
            { "sel": "li", "data": {}, "text": "苹果" },
            { "sel": "li", "data": {}, "text": "香蕉" },
            { "sel": "li", "data": {}, "text": "柠檬" },
            { "sel": "li", "data": {}, "text": "橘子" },
          ]
        }
      ]
    }
复制代码

虚拟Dom的一个重要函数: h函数

h函数用来生成虚拟节点(Vnode)
h函数是这样调用的

h('a',{props:{href:'https://www.baidu.com'}},'百度')
//通过调用h函数的到的虚拟节点为
{ "sel": "a", "data": { "props": { "href": "https://www.baidu.com" } }, "text": "百度" }
//页面真正的节点为:
<a href="https://www.baidu.com">百度</a>

//h函数可以嵌套使用
const myNode = h('ul',{},[
    h('li',{},'苹果'),
    h('li',{},'香蕉'),
    h('li',{},'柠檬')
])

//此时得到的虚拟Dom
{
  'sel':'ul',
  'data':{},
  'children':[
    {'sel':'li',data:{},'text':'苹果'},
    {'sel':'li',data:{},'text':'香蕉'},
    {'sel':'li',data:{},'text':'柠檬'},
  ]
}

//此时的虚拟Dom需要通过patch函数上树  今天只手写h函数和diff算法  不考虑patch函数上树

const box = document.getElementById('box')
patch(box, myNode)
复制代码