2022了还不会虚拟DOM吗？虚拟DOM入门与DIFF和PATCH的完整实现

最新推荐文章于 2023-03-15 11:26:11 发布
最新推荐文章于 2023-03-15 11:26:11 发布
阅读量567 收藏 4
点赞数 1
分类专栏： vue.js 文章标签： javascript 前端 虚拟DOM DIFF PATCH
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/keader01/article/details/122549770
版权

1.虚拟DOM介绍

虚拟DOM是MVVM框架的灵魂，他相当于存在于真实DOM对象和数据之间的缓存容器，虚拟DOM的概念之所以提出，主要原因在于现今浏览器直接操作DOM对象实现视图更新的开销仍然是巨大的。

随着Web技术的飞速发展，浏览器陆续支持更多新的特色能力和移动端操作能力，但是更新视图依然需要使用DOM操作的API来实现，随着计算机硬件的更新换代，现今Web项目所运行的计算机硬件性能足够运行各种大型的网页应用，但在此等优越的条件下，通过WebAPI直接操作DOM对象来更新视图的代价仍然是非常庞大的。

1.1 操作真实DOM的开销在哪里

众所周知，在HTML文件中通过JavaScript操作DOM对象是同步机制的API，所以他遵循顺序结构和代码的有序运行。也就是说当网页中运行N行代码时，如果其中有M行代码获取了DOM对象并操作指定DOM元素的内容或样式，在运行到任何一行DOM操作代码时，由于同步运行的机制，浏览器无法得知后续还有多少次DOM操作，所以在执行下一行代码前浏览器必须将当前行的DOM操作直接更新。

举个例子，当网页有4个输入框组件存在时，开发者若想要将4个输入框的内容分别修改成1、2、3、4。其需要执行的操作，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input id="a" type="text">
    <input id="b" type="text">
    <input id="c" type="text">
    <input id="d" type="text">
    <script type="text/javascript">
      // 获取4个输入框对象
      let ipt1 = document.querySelector('#a')
      let ipt2 = document.querySelector('#b')
      let ipt3 = document.querySelector('#c')
      let ipt4 = document.querySelector('#d')
      // 修改4个输入框的内容
      ipt1.value = 1
      ipt2.value = 2
      ipt3.value = 3
      ipt4.value = 4
    </script>
  </body>
</html>

运行代码后会发现，网页中4个输入框的内容直接变成1、2、3、4。看似没问题的案例实际运行的步骤并不是所见的结果。由于JavaScript同步代码顺序运行，DOM操作也是同步触发的，首先在获取4个输入框对象时就会触发4次对DOM树的遍历，来碰撞相匹配的元素对象，再次是当每个DOM对象通过value属性赋值的时候，会直接触发一次视图更新，所以实际上网页是通过4次遍历和4次DOM更新来实现最终展示结果的。编写此代码的实际目的只不过是想要最终渲染的结果，所以这显然是浪费性能的。接下来，通过实际更改了解DOM更新的步骤，将原案例插入部分新内容，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input id="a" type="text">
    <input id="b" type="text">
    <input id="c" type="text">
    <input id="d" type="text">
    <script type="text/javascript">
      // 展示当前4个输入框中的value的值
      function showDOM(){
        console.log(ipt1.value)
        console.log(ipt2.value)
        console.log(ipt3.value)
        console.log(ipt4.value)
      }
      // 获取4个输入框对象
      let ipt1 = document.querySelector('#a')
      let ipt2 = document.querySelector('#b')
      let ipt3 = document.querySelector('#c')
      let ipt4 = document.querySelector('#d')
      // 修改4个输入框的内容
      ipt1.value = 1
      showDOM()
      ipt2.value = 2
      showDOM()
      ipt3.value = 3
      showDOM()
      ipt4.value = 4
      showDOM()
    </script>
  </body>
</html>

更改代码后，运行代码时控制台会输出如下内容，如图。

p1-1.png

 

阅读控制台会发现，当对第一个输入框设置value时，剩下3个输入框此时的value属性还没有实际值，这意味着只有在最后一个输入框的value设置完毕后，网页中的4个输入框才能完整的展示1、2、3、4。这就意味着实际DOM需要更新4次才能最终展示结果，只不过肉眼无法看见4次更新，就算不考虑4次更新的情况下获取4个输入框对象仍然需要从HTML页面的根结点开始遍历4次DOM树才能获取4个输入框的引用对象。

1.2 什么是虚拟DOM

众所周知，浏览器在通过HTML解析器解析HTML标记语言时，会将嵌套结构的标记对象映射成一棵极大的DOM树，树的每一个节点都包含当前实际视图中指定对象的结构信息、样式信息以及事件信息等大量的属性和方法。虚拟DOM与真实DOM一样也是一颗树，不同的是虚拟DOM不直接代表真实的视图结构。可以认为虚拟DOM是真实DOM树的简化版，节点数量与真实DOM完全一致，每个节点挂载的属性很少。虚拟DOM是纯粹的JavaScript对象，所以他保存在JavaScript的直接堆区中，所以访问虚拟DOM对象的指定节点速度会比真实DOM更快。由于虚拟DOM是纯粹的JavaScript对象，所以更新该对象也不需要GUI线程处理视图更新，基于这个特点，可以完美的规避DOM操作API执行一次就触发一次视图更新的问题。

描述了真实DOM树和虚拟DOM树的本质区别后，通过DOM操作流程来对比一下真实DOM和虚拟DOM更新的机制。首先图形化了解一下真实DOM实际更新视图的流程，如图。

p1-2.png

根据图中的描述得知，DOM对象的属性一旦变更就会触发一次视图更新，所以实际两行操作是两次处理，在DOM树中找到指定的input标记也需要至少从body开始进行递归遍历。接下来了解一下集合了虚拟DOM树后视图的更新流程，如图。

p1-3.png

根据两张图可以直观的识别到虚拟DOM操作视图变更的优势，他可以在获取DOM对象和视图更新两个层面同时降低开销，带来的弊端是需要在JavaScript的堆区创造一个和真实视图完全一样结构的DOM树，不过虚拟DOM树的节点和真实DOM树的节点体积相比要小得多，接下来以一个简单的虚拟DOM对象和真实DOM对象在控制台的对比图为例查看两者的区别，如图。

p1-4.png

2.创建一颗虚拟DOM树

前面的章节已经介绍了什么是虚拟DOM数据，若想要实现MVVM架构的数据和视图映射关系，首先需要在代码环境中实现一个方法，该方法可以根据描述的标签节点和属性自动构建一颗JavaScript的虚拟DOM树，虚拟DOM树本身的每一个节点还应具备该元素的真实DOM对象，在非渲染步骤执行前真实DOM对象不参与网页渲染，所以虚拟DOM叶子结点上就算存在他对应的真实DOM对象，也不会影响渲染性能，同时其真实DOM对象属性保存的仅仅是该对象的引用地址，所以并不会增加虚拟DOM树的体积。

接下来在一个空的HTML文件中创建对象V，并且在V对象中创建函数h，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      //虚拟DOM总对象
      let V = {
        //创建虚拟DOM节点的函数
        /**
         * @param {Object} tagName 标签名
         * @param {Object} options 标签属性
         * @param {Object} children 标签子元素
         */
        h(tagName,options,children){
          //...具体实现
        }
      }
    </script>
  </body>
</html>
​

接下来完成h函数的具体实现，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      let V = {
        /**
         * @param {Object} tagName 标签名
         * @param {Object} options 标签属性
         * @param {Object} children 标签子元素
         */
        h(tagName,options,children){
          // 创建虚拟DOM节点
          let VNode = {}
          // 判断动态参数如果只有一个时
          if(arguments.length == 1){
            // 如果参数为非对象代表h函数创建了纯Text节点
            if(!(arguments[0] instanceof Object)){
              // 初始化纯文本节点和其真实DOM对象
              VNode = {
                type:'text',
                content:tagName+'',
                $el:document.createTextNode(tagName+'')
              }
            }else{
              // 若非纯文本节点统一认为是虚拟DOM对象
              VNode = arguments[0]
            }
          }else{
            // 当正常设置参数时初始化该虚拟节点的真实DOM对象
            let element = document.createElement(tagName)
            // 初始化行内样式
            this.initStyles(element,options)
            // 初始化元素默认属性
            this.initAttrs(element,options)
            // 初始化事件系统
            this.initEvents(element,options)
            // 初始化id和class
            this.initIdClass(element,options)
            let c
            // 处理虚拟DOM子节点
            if(children instanceof Array){
              // 将每个子节点采用h函数重新初始化
              c = children.map(item => {
                return this.h(item)
              })
            }else{
              //当子节点为非数组时
              if(children){
                c = [this.h(children)]
              }
            }
            // 将虚拟DOM节点信息和其真实DOM对象进行处理
            VNode = {
              type:tagName,
              ...options,
              $el:element,
              children:c 
            }
          }
          // 返回创建的节点
          return  VNode
        },
        // 初始化行内样式
        initStyles(element,options){
          for(let key in options.style){
            element.style[key] = options.style[key]
          }
        },
        // 初始化标签自带属性
        initAttrs(element,options){
          for(let key in options.attrs){
            element[key] = options.attrs[key]
          }
        },
        // 初始化标签的事件系统
        initEvents(element,options){
          for(let key in options.on){
            element.addEventListener(key,options.on[key])
          }
        },
        // 初始化id和class
        initIdClass(element,options){
          if(options.id){
            element.id = options.id
            
          }
          if(options.className){
            element.className = options.className
          }
          
        }
      }
    </script>
  </body>
</html>
​

定义完该虚拟树后便可以直接通过V.h()来动态创建虚拟DOM节点以及虚拟DOM树，可以通过JavaScript函数模拟React的方式创建一套虚拟DOM节点，代码如下：

var count = 0
var type = 'text'
function Index(){
  return V.h('div',{
    id:'d',
    className:'p-d',
    attrs:{
      'data-name':'hahah'
    },
    on:{
      click(){
        console.log('点击div的点击事件')
      }
    }
  },[
    //将count动态追加到虚拟DOM树中
    count,
    V.h('input',{
      attrs:{
        value:count,
        type:type //将type动态绑定到输入框的类型中
      },
      on:{
        input(e){
          console.log('输入框的输入事件')
        }
      }
    }),
    V.h('select',{
      on:{
        input(e){
          console.log('下拉列表的选择事件')
        }
      }
    },[
      V.h('option',{
        attrs:{
          value:'radio'
        }
      },'单选按钮'),
      V.h('option',{
        attrs:{
          value:'checkbox'
        }
      },'多选按钮'),
      V.h('option',{
        attrs:{
          value:'password'
        }
      },'密码框'),
      V.h('option',{
        attrs:{
          value:'text'
        }
      },'输入框')
    ]),
    V.h('button',{
      id:'btn',
      attrs:{
        type:'submit'
      },
      on:{
        click(){
          console.log('按钮的点击事件')
        }
      }
    },'你好')
  ])
}
let vdom = Index()
console.log(vdom)

根据Index函数的返回结构创造的虚拟DOM树，在控制台中输出的结果，如图。

p1-5.png

此时网页中无法看到虚拟DOM所代表的真实视图，接下来创建createElement方法来将初始的虚拟DOM对象转化成真实DOM树并渲染到网页中。在V对象中追加如下内容，代码如下：

let V = {
  //创建真实DOM树的函数
  /**
         * @param {Object} el 选择器
         * @param {Object} vdom 虚拟DOM树
         */
  createElement(el,vdom){
    // 获取真实DOM树的渲染容器
    let elem = document.querySelector(el)
    // 创建递归渲染函数
    function appendChild(elem,children){
      //  递归将元素节点插入到根节点中
      children.forEach(item => {
        // 将当前节点的子元素设置为虚拟DOM节点对应的DOM对象
        elem.appendChild(item.$el)
        // 如果该节点有后代元素便执行递归
        if(item.children){
          appendChild(item.$el,item.children)
        }
      })
​
    }
    appendChild(elem,[vdom])
  }
}

通过V.createElement可以将创建好的虚拟DOM树直接生成真实DOM结果映射到视图中，代码如下:

var count = 0
var type = 'text'
function Index(){
  return V.h('div',{
    id:'d',
    className:'p-d',
    attrs:{
      'data-name':'hahah'
    },
    on:{
      click(){
        console.log('点击div的点击事件')
      }
    }
  },[
    //将count动态追加到虚拟DOM树中
    count,
    V.h('input',{
      attrs:{
        value:count,
        type:type //将type动态绑定到输入框的类型中
      },
      on:{
        input(e){
          console.log('输入框的输入事件')
        }
      }
    }),
    V.h('select',{
      on:{
        input(e){
          console.log('下拉列表的选择事件')
        }
      }
    },[
      V.h('option',{
        attrs:{
          value:'radio'
        }
      },'单选按钮'),
      V.h('option',{
        attrs:{
          value:'checkbox'
        }
      },'多选按钮'),
      V.h('option',{
        attrs:{
          value:'password'
        }
      },'密码框'),
      V.h('option',{
        attrs:{
          value:'text'
        }
      },'输入框')
    ]),
    V.h('button',{
      id:'btn',
      attrs:{
        type:'submit'
      },
      on:{
        click(){
          console.log('按钮的点击事件')
        }
      }
    },'你好')
  ])
}
let vdom = Index()
//将虚拟DOM树创建为真实DOM对象
V.createElement('#app',vdom)

创建后的真实视图会出现渲染的视图结构并且在每个虚拟DOM节点中定义的on事件都可以正常工作，如图。

p1-6.png

3.实现DIFF和PATCH

前面的案例已经可以通过JavaScript创建虚拟DOM树以及其对应的真实DOM渲染了，在此基础上再进一步就可以完成Vue和React等MVVM的底层架构搭建，其核心点在于DIFF和PATCH。

DIFF代表差异算法，由于虚拟DOM框架的核心是将数据与虚拟DOM关联，通过以数据为核心驱动页面渲染，每次更新视图需要先将之前的N次修改映射到虚拟DOM树以及其对应的真实DOM节点上，再将修改后的虚拟DOM树和修改前的虚拟DOM树做差异比较算法记录差异点。

PATCH代表补丁，即在DIFF的过程中遇到两次虚拟DOM树的差异点时则对差异点进行补丁处理并更新实际对应的真实视图。

通常在虚拟DOM的DIFF中采用同层比较算法，用以从根节点递归的比较变化前和变化后的虚拟DOM树的每个节点数据，如果两者比较的结果相同则进入深层递归继续比较其标签上的属性和其后代元素。如果新旧两颗树相同层级的相同位置节点为不同元素则直接使用新节点替换旧节点。同层比较算法的具体描述，如图。

p1-7.png

接下来通过代码编程的方式在原始虚拟DOM对象中实现DIFF+PATCH，最终实现通过纯JavaScript数据操作更新视图。在V对象中追加如下函数，代码如下：

let V = {
  /**
         * @param {Object} OldVNode 旧的虚拟DOM节点
         * @param {Object} VNode 新的虚拟DOM节点
         */
  patch(OldVNode,VNode){
    // 判断同层节点是否相同
    if(this.sameVNode(OldVNode,VNode)){
      // 相同节点进入属性PATCH
      this.patchAttrs(OldVNode,VNode)
      // 若为文本节点则进入文本PATCH
      this.patchText(OldVNode,VNode)
      // 对节后代深层递归重复PATCH
      if(OldVNode.children){
        OldVNode.children.forEach((item,index) => {
          this.patch(item,VNode.children[index])
        })
      }
​
    }else{
      // 若前后节点不同执行替换
      this.replaceVNode(OldVNode,VNode)
    }
​
  },
  // 属性PATCH
  patchAttrs(OldVNode,VNode){
    // 若元素相同则将新虚拟DOM对象的真实DOM节点引用为当前节点
    VNode.$el = OldVNode.$el
    // 遍历虚拟DOM的属性将变更部分更新到真实DOM中
    for(let key in VNode.attrs){
      if(VNode.$el[key]!=VNode.attrs[key]){
        VNode.$el[key] = VNode.attrs[key]
      }
    }
  },
  // 文本PATCH
  patchText(OldVNode,VNode){
    if(OldVNode.type == 'text'){
      // 元素相同时文本节点直接挂载原始DOM对象的引用
      VNode.$el = OldVNode.$el
      // 若文本内容不同则更新
      if(VNode.$el.textContent!=VNode.content){
        VNode.$el.textContent = VNode.content
      }
    }
  },
  // 替换旧节点的DOM对象
  replaceVNode(OldVNode,VNode){
    OldVNode.$el.parent.insertBefore(OldVNode.$el,VNode.$el)
    OldVNode.$el.parent.removeChild(OldVNode.$el)
  },
  // 判断是否为相同节点
  sameVNode(OldVNode,VNode){
    if(OldVNode.key == VNode.key){
      return true
    }else if(OldVNode.type == VNode.type){
      return true
    }else{
      return false
    }
  }
}

为更加贴近以数据为核心驱动页面渲染，使用Proxy对象实现属性赋值的监听，在V对象中继续追加函数，代码如下：

let V = {
  // 定义响应式数据定义对象
  reactive(data){
    // 通过代理对象返回可响应式的数据对象
    return new Proxy(data,{
      // 通过防抖算法实现多次更改数据只触发一次更新
      set:debounce((target,property,value) =>{
        console.log('视图更新1次')
          // 获取更改前后的虚拟DOM对象
          let newVDOM = Index()
          let oldVDOM = vdom
          // 通过patch执行DIFF的差异更新
          this.patch(oldVDOM,newVDOM)
          //将全局的vdom替换为本次更新好的vdom
          vdom = newVDOM
          // console.log(target)
      },0),
      get(target,property){
        return target[property]
      }
    })
  }
}
//防抖函数
function debounce(fn,timer){
  let timeout
    return function(target,property,value){
    target[property] = value
      if(timeout) clearTimeout(timeout)
        timeout = setTimeout(() => {
          fn(target,property,value)
        },timer)
      }
}

完成响应式数据对象reactive的定义后进行完整代码的实现，完整代码包括虚拟DOM的创建和视图更新的处理机制，本案例不管实现了DIFF和PATCH，还利用了防抖的逻辑模拟了异步更新视图队列的效果，实现多次变更虚拟DOM树，最终只会触发一次PATCH从而规避同步操作DOM导致的变更一次DOM属性视图更新一次的开销问题，从而实现同时修改多个响应式数据变量只有一次真实DOM处理，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      let V = {
        /**
         * @param {Object} tagName 标签名
         * @param {Object} options 标签属性
         * @param {Object} children 标签子元素
         */
        h(tagName,options,children){
          // 创建虚拟DOM节点
          let VNode = {}
          // 判断动态参数如果只有一个时
          if(arguments.length == 1){
            // 如果参数为非对象代表h函数创建了纯Text节点
            if(!(arguments[0] instanceof Object)){
              // 初始化纯文本节点和其真实DOM对象
              VNode = {
                type:'text',
                content:tagName+'',
                $el:document.createTextNode(tagName+'')
              }
            }else{
              // 若非纯文本节点统一认为是虚拟DOM对象
              VNode = arguments[0]
            }
          }else{
            // 当正常设置参数时初始化该虚拟节点的真实DOM对象
            let element = document.createElement(tagName)
            // 初始化行内样式
            this.initStyles(element,options)
            // 初始化元素默认属性
            this.initAttrs(element,options)
            // 初始化事件系统
            this.initEvents(element,options)
            // 初始化id和class
            this.initIdClass(element,options)
            let c
            // 处理虚拟DOM子节点
            if(children instanceof Array){
              // 将每个子节点采用h函数重新初始化
              c = children.map(item => {
                return this.h(item)
              })
            }else{
              //当子节点为非数组时
              if(children){
                c = [this.h(children)]
              }
            }
            // 将虚拟DOM节点信息和其真实DOM对象进行处理
            VNode = {
              type:tagName,
              ...options,
              $el:element,
              children:c 
            }
          }
          // 返回创建的节点
          return  VNode
        },
        // 初始化行内样式
        initStyles(element,options){
          for(let key in options.style){
            element.style[key] = options.style[key]
          }
        },
        // 初始化标签自带属性
        initAttrs(element,options){
          for(let key in options.attrs){
            element[key] = options.attrs[key]
          }
        },
        // 初始化标签的事件系统
        initEvents(element,options){
          for(let key in options.on){
            element.addEventListener(key,options.on[key])
          }
        },
        // 初始化id和class
        initIdClass(element,options){
          if(options.id){
            element.id = options.id
            
          }
          if(options.className){
            element.className = options.className
          }
          
        },
        /**
         * @param {Object} OldVNode 旧的虚拟DOM节点
         * @param {Object} VNode 新的虚拟DOM节点
         */
        patch(OldVNode,VNode){
          // 判断同层节点是否相同
          if(this.sameVNode(OldVNode,VNode)){
            // 相同节点进入属性PATCH
            this.patchAttrs(OldVNode,VNode)
            // 若为文本节点则进入文本PATCH
            this.patchText(OldVNode,VNode)
            // 对节后代深层递归重复PATCH
            if(OldVNode.children){
              OldVNode.children.forEach((item,index) => {
                this.patch(item,VNode.children[index])
              })
            }
            
          }else{
            // 若前后节点不同执行替换
            this.replaceVNode(OldVNode,VNode)
          }
          
        },
        // 属性PATCH
        patchAttrs(OldVNode,VNode){
          // 若元素相同则将新虚拟DOM对象的真实DOM节点引用为当前节点
          VNode.$el = OldVNode.$el
          // 遍历虚拟DOM的属性将变更部分更新到真实DOM中
          for(let key in VNode.attrs){
            if(VNode.$el[key]!=VNode.attrs[key]){
              VNode.$el[key] = VNode.attrs[key]
            }
          }
        },
        // 文本PATCH
        patchText(OldVNode,VNode){
          if(OldVNode.type == 'text'){
            // 元素相同时文本节点直接挂载原始DOM对象的引用
            VNode.$el = OldVNode.$el
            // 若文本内容不同则更新
            if(VNode.$el.textContent!=VNode.content){
              VNode.$el.textContent = VNode.content
            }
          }
        },
        // 替换旧节点的DOM对象
        replaceVNode(OldVNode,VNode){
          OldVNode.$el.parent.insertBefore(OldVNode.$el,VNode.$el)
          OldVNode.$el.parent.removeChild(OldVNode.$el)
        },
        // 判断是否为相同节点
        sameVNode(OldVNode,VNode){
          if(OldVNode.key == VNode.key){
            return true
          }else if(OldVNode.type == VNode.type){
            return true
          }else{
            return false
          }
        },
        /**
         * @param {Object} el 选择器
         * @param {Object} vdom 虚拟DOM树
         */
        createElement(el,vdom){
          // 获取真实DOM树的渲染容器
          let elem = document.querySelector(el)
          // 创建递归渲染函数
          function appendChild(elem,children){
            //  递归将元素节点插入到根节点中
            children.forEach(item => {
              // 将当前节点的子元素设置为虚拟DOM节点对应的DOM对象
              elem.appendChild(item.$el)
              // 如果该节点有后代元素便执行递归
              if(item.children){
                appendChild(item.$el,item.children)
              }
            })
            
          }
          appendChild(elem,[vdom])
        },
        // 定义响应式数据定义对象
        reactive(data){
          // 通过代理对象返回可响应式的数据对象
          return new Proxy(data,{
            // 通过防抖算法实现多次更改数据只触发一次更新
            set:debounce((target,property,value) =>{
              console.log('视图更新1次')
              // 获取更改前后的虚拟DOM对象
              let newVDOM = Index()
              let oldVDOM = vdom
              // 通过patch执行DIFF的差异更新
              this.patch(oldVDOM,newVDOM)
              //将全局的vdom替换为本次更新好的vdom
              vdom = newVDOM
              // console.log(target)
            },0),
            get(target,property){
              return target[property]
            }
          })
        }
        
      }
      function debounce(fn,timer){
        let timeout
        return function(target,property,value){
          target[property] = value
          if(timeout) clearTimeout(timeout)
          timeout = setTimeout(() => {
            fn(target,property,value)
          },timer)
        }
      }
      // 定义可响应的数据对象
      let data = V.reactive({
        count:0,
        count1:10,
        type:'text'
      })
      
      
      
      function Index(){
        return V.h('div',{
          id:'d',
          className:'p-d',
          attrs:{
            'data-name':'hahah'
          },
          on:{
            click(){
              console.log('点击div的点击事件')
            }
          }
        },[
          //将count动态追加到虚拟DOM树中
          'count的结果：'+data.count,
          V.h('br',{}),
          //将count1动态追加到虚拟DOM树中
          'count1的结果：'+data.count1,
          V.h('br',{}),
          V.h('input',{
            attrs:{
              value:data.count,
              type:data.type //将type动态绑定到输入框的类型中
            },
            on:{
              input(e){
                console.log('输入框的输入事件')
                // 通过data属性同时更新count和count1的值
                //用以测试多次更改一次渲染
                data.count = e.target.value
                data.count1 = e.target.value+'aaa'
              }
            }
          }),
          V.h('select',{
            on:{
              input(e){
                console.log('下拉列表的选择事件')
                // 动态变更下拉菜单实现元素的展示样式替换
                
                data.type = e.target.value
                console.log(data.type)
              }
            }
          },[
            V.h('option',{
              attrs:{
                value:'radio'
              }
            },'单选按钮'),
            V.h('option',{
              attrs:{
                value:'checkbox'
              }
            },'多选按钮'),
            V.h('option',{
              attrs:{
                value:'password'
              }
            },'密码框'),
            V.h('option',{
              attrs:{
                value:'text'
              }
            },'输入框')
          ]),
          V.h('button',{
            id:'btn',
            attrs:{
              type:'submit'
            },
            on:{
              click(){
                console.log('按钮的点击事件')
                // 只更改一个count实现单独更新
                data.count++
              }
            }
          },'你好')
        ])
      }
      let vdom = Index()
      console.log(vdom)
      V.createElement('#app',vdom)
      
    </script>
  </body>
</html>
​

完整案例运行时可以直接在初始界面中操作第一个输入框的内容，第一个输入框在变更时会同时修改data中的count和count1两个属性，所以会同时出发两次reactive的set函数，此时查看控制台会发现只执行一次patch，视图仅仅更新一次，如图。

p1-8.png

当切换count和count1时可以同时观察web查看器的Elements选项，会发现只有变更部分的DOM节点会执行更新，其他不涉及变更的DOM节点不会被重新渲染，如图。

p1-9.png.jpeg

到此为止虚拟DOM的创建以及DIFF和PATCH的初步实现便介绍完毕。

尾声

虚拟DOM的思路与实现对于业务开发方面虽然没有实质性的帮助，虚拟DOM本身也并不是Vue或React等任何框架框架的专属，而是MVVM架构框架的渲染和数据驱动原理的一部分，本文从基础到实现仅仅作为虚拟DOM的简单介绍，并不没有实现完善的虚拟DOM和组件化更新机制，通过简单的实现以方便读者理解。读者们可以通过阅读本文在对虚拟DOM的理解上得到帮助。有不懂的或想学习的内容可以联系作者催更哈，最后感谢阅读。

__LeoZhang
关注
专栏目录
vue中的虚拟dom和diff算法
webchang的博客
05-17 2192
简单理解底层的实现原理
vidact:没有虚拟DOM的可将React兼容代码转换为VanillaJS的编译器
03-20
Vidact Vidact将您的React源代码编译为无虚拟DOM的VanillaJS代码 :trade_mark: 。它类似于Svelte，但与不同，Vidact不会引入新的语法。它采用纯兼容ReactJavaScript（JSX）并输出纯JavaScript。 Vidact当前处于Alpha阶段，并具有已知的局限性。在某些极端情况下，它并不完全符合React的行为，而且可能永远不会遵循，但目标是使行为尽可能接近于React。另外，它当前仅支持功能组件，不支持类组件。 它是如何工作的，与React有什么不同？ Vidact是一个babel插件，它会扫描您的源代码以查找需要响应响应属性或状态更改而更新UI的哪些部分，并生成纯JavaScript代码，该JavaScript代码应具有与等效React代码相同的DOM结果。请注意，所有这些都是在构建时完成的！而React通过利用虚拟DOM来确定需要在实际DO
深入浅出Vue.js：第7章 (第②篇 虚拟DOM）diff中的patch
SevenLee的个人博客
01-07 249
patching算法 虚拟DOM最核心的部分就是patch，它可以将vnode渲染成真实的DOM。 patch也可以叫做patching算法，通过它渲染真实DOM时，并不是暴力覆盖原有DOM，而是比对新旧两个vnode之间有什么不同，然后根据比对结果找出实际需要更新的节点进行更新，其实际作用就是在现有DOM上进行修改来实现更新视图的目的。 之所以要这么做，是因为DOM操作的执行速度远不如JavaScript的运算速度快，因此将大量的DOM操作搬运到js中，使用patching算法来计算出真正需要更新的节点，
vue的虚拟DOM、patch即DOM-Diff算法
hhhh
05-03 841
过去jQuery声明式操作DOM 现在Angular、React、Vue三大框架都是声明式操作DOM DOM操作的执行速度远不及JavaScript的运算速度 虚拟DOM:用JavaScript模拟DOM树，并渲染这个DOM树。比较新老DOM树，只渲染差异部分。 Angular脏检查、React虚拟DOM、Vue变化侦测粒度更细的虚拟DOM 通过模板来描述状态与视图的映射关系，会将模板先编译成渲染函数，然后执行渲染函数生成虚拟节点。 中等级别，通知到组件 创建HTML 在vue中创建HTML，可以通过渲
封装 HTTP 请求
最新发布
qq_46177396的博客
03-15 333
【代码】封装 HTTP 请求。
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
虚拟DOM和真实DOM的区别在于，虚拟DOM不会直接引起回流和重绘，它通过比较差异后一次性地进行批量更新，而真实DOM则会在每次操作时可能触发回流和重绘，特别是在DOM操作频繁时，性能损耗较大。 在Vue中，虚拟DOM的...
虚拟DOM与diff算法.doc
07-09
在现代Web开发中，虚拟DOM（Virtual DOM）与diff算法是提高应用性能的关键技术，特别是在Vue和React等框架中。它们解决了直接操作DOM导致的性能问题，使得开发者可以更高效地处理用户界面的更新。 虚拟DOM是一种...
虚拟dom && diff算法
01-08
虚拟DOM（Virtual DOM）是现代前端开发中一个重要的概念，主要应用于JavaScript库和框架，如React、Vue等。它的核心思想是用JavaScript对象来模拟实际的DOM树，从而提高Web应用的性能。 1. **虚拟DOM的概念** - ...
虚拟DOM的实现
05-20
- 性能优化：当应用状态改变时，虚拟DOM会计算出新的DOM树与旧DOM树的差异（称为“Diff”算法），然后只更新必要的部分，而不是重新渲染整个页面。 - 异步更新：虚拟DOM允许开发者在一个批量更新的队列中进行多次...
虚拟Dom
weixin_45892086的博客
04-07 324
虚拟Dom 一直以来都知道虚拟dom这个概念就是用代码来生成Dom，可以用diff算法 今天自己来实现一下，如下 创建一个对象，包含元素的各种属性，我这里就写了标签名和文字。嵌套的加个个Child 然后循环数组创建元素插入到body中，如果有child就插入到父元素中。 因为是一个数组，每次改变的时候就可以对比上次和本次dom数组 判断哪里变化了，变化了才修改这就是diff算法 <!DOCTYPE html> <html lang="en"> <head> &
js 装饰器_Vue中使用装饰器，我是认真的
weixin_39568889的博客
11-22 921
产品上线事繁多，测试产品催不离。 休问Bug剩多少，眼圈如漆身如泥。作为一个曾经的Java coder, 当我第一次看到js里面的装饰器(Decorator)的时候，就马上想到了Java中的注解，当然在实际原理和功能上面，Java的注解和js的装饰器还是有很大差别的。本文题目是Vue中使用装饰器，我是认真的，但本文将从装饰器的概念开发聊起，一起来看看吧。通过本文内容，你将学到以下内容:了解什么是装...
Cesium 顺滑如丝般漫游，视角跟随（锁定视角）
叶子的博客
02-04 7237
/* eslint-disable no-param-reassign */ /* eslint-disable class-methods-use-this */ /* eslint-disable no-undef */ export class Roaming { /** * Creates an instance of Roaming. * @param {*} viewer 需要传入 * @param {*} options.model 模型的相关配置 ...
虚拟 dom
lk19910323的博客
04-26 299
虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。 如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要渲染成真实的 dom 如果组件内有响应的数据，数据发生改变的
【axios源码】- 过渡选项校验函数validator研读解析
bierxiensi的博客
02-14 888
首发于我的公众号「前端面壁者」，欢迎关注。 transitional options for backward compatibility that may be removed in the newer versions Validator共81行代码，在发送请求时会检测axios版本以便作一些兼容性配置 一、环境准备 axios 版本 v0.24.0 通过 github1s 网页可以 查看 axios 源码 调试需要 clone 到本地 git clone https://g.
谈一谈神奇的ShadowDOM
热门推荐
博勋的博客
07-20 1万+
这两天看《webkit技术内幕》发现了一些神奇的东西，其中之一就是ShadowDOM，学web开发也有两年多时间了，居然一直不知道还有一个ShadowDOM……惭愧惭愧 ShadowDOM主要解决一个文档中可能需要大量交互的多个DOM树建立和维护各自功能边界的问题
有了可读流，又有了可写流，两件快乐事重合在一起，为什么会变成这样呢……...
weixin_33693070的博客
07-19 140
什么是流？ 根据Node.js官网解释，流（stream）是一种在 Node.js 中处理流式数据的抽象接口。 1、抽象接口就是将数据的传输隐喻为水管之间的连接，水管里面的水就是数据 2、是有方向、可连接的 3、数据格式通常是Buffer 流共分四种 Writable(可写流) Readable(可读流) Duplex(可读写流，又称双工流) Transform(属于Duplex的一种) ...
Vue中使用装饰器，我是认真的
wk843620202的专栏
08-21 7353
❝产品上线事繁多，测试产品催不离。休问Bug剩多少，眼圈如漆身如泥。❞作为一个曾经的Java coder, 当我第一次看到js里面的装饰器(Decorator)的时候，就马上想到了Jav...
v-if与v-show(动态显示dom元素)
qq_43482345的博客
12-10 3167
区别 （1）手段： v-if是动态的向DOM树内添加或者删除DOM元素； v-show是通过设置DOM元素的display样式属性控制显隐； （2）编译过程： v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v-show只是简单的基于css切换； （3）编译条件： v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编
0代码详解：Vue2虚拟DOM diff实现原理与VNode构造
深入理解Vue2.x的虚拟DOM diff原理主要关注于核心库中的虚拟DOM（Virtual DOM）实现和其差异比较算法。Vue2的虚拟DOM是其性能优化的关键，它通过将应用程序状态与DOM树进行对比，仅在必要的时候更新实际DOM，从而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值