虚拟dom (virtual dom)

virtual dom 是Vue 和 react 的核心 vdom比较独立 使用也比较简单
vdom是什么 为什么会存在vdom
用js模拟的DOM结构 DOM变化的对比 放在js层来做(图灵完备语言) 能处理算法的语言是图灵完备语言 dom操作是最耗费性能的 提高重绘性能
例如jQuery 如果一个表格中有三行三列内容 如果需要每次点击改变其中一行的话 如果用jQuery 尽量避免推到重来 推到重来是首先需要清空容器中的DOM 然后点击再把三行三列重新渲染一遍 这样做是很耗费性能的 项目越复杂影响越严重 虚拟dom是将dom对比操作放在js层 只更新改变的 提高效率

vdom如何应用 核心API是什么
虚拟dom以snabbdom为模板 通过h函数来定义增加或减少的 通过patch函数来对比增加前后的dom 只更改改变的
核心函数1.h函数两种用法h(’<标签名>’,{…属性…},{…子元素…})有很多子元素
h(’<标签名>’,{…属性…},’…’)有一个子元素
2.patch函数的两种用法 patch(container,vonde)把所有的虚拟dom渲染到容器中
patch(vnode,newvonde) 新旧vnode对比
介绍下 diff算法
什么是diff算法?基本上diff算法都来源于虚拟dom 但是不是前端独创的
例如有两个TXT文件 一个是100行123 另一个是90行123还有十行不是123 然后在Linux环境下 运行diff命令 diff log1.txt log2.txt 然后会显示出这两个文件的区别 也可以用 git status 之后 git diff

vdom为什么用diff算法
DOM操作是昂贵的 因此尽量减少DOM操作
用diff算法找出本次DOM必须更新的节点来更新 其他的不更新

diff实现过程
根据上文patch函数的两种用法

function updateChildren(vnode,newVnode){
   //vnode,nweVnode是进行对比的两个dom节点 他们的底下各自有各自的子节点
   let children = vnode.children || []
   let newChildren = newVnode.children || []
   //遍历现有的children
   children.forEach(function(child,index){
      let newChild = newChildren[index]
      //newChild 等于 newChildren的每一项 先从第一项开始
      if(newChilf == null){
           return
}
    if(chilf.tag === newChild.tag){
      //tag是dom节点的名称如ul li 如果两个都一样 这是一个递归
      updateChildren(child,newchild)
    }else{
    //两者tag不一样 把新的替换旧的 一样就继续对比 不一样就替换
      replaceNode(child,newChild)
}
})
}