做网站引用别人的图片,做网站用什么前端框架,安庆建设工程造价网站,wordpress 锚点插件目录 1. 前言
2. patch
3. 创建节点
4. 删除节点
5. 更新节点
6. 总结 1. 前言
在上一篇文章介绍VNode的时候我们说了#xff0c;VNode最大的用途就是在数据变化前后生成真实DOM对应的虚拟DOM节点#xff0c;然后就可以对比新旧两份VNode#xff0c;找出差异所在…目录 1. 前言
2. patch
3. 创建节点
4. 删除节点
5. 更新节点
6. 总结 1. 前言
在上一篇文章介绍VNode的时候我们说了VNode最大的用途就是在数据变化前后生成真实DOM对应的虚拟DOM节点然后就可以对比新旧两份VNode找出差异所在然后更新有差异的DOM节点最终达到以最少操作真实DOM更新视图的目的。而对比新旧两份VNode并找出差异的过程就是所谓的DOM-Diff过程。DOM-Diff算法是整个虚拟DOM的核心所在那么接下来我们就以源码出发深入研究一下Vue中的DOM-Diff过程是怎样的。
2. patch
在Vue中把 DOM-Diff过程叫做patch过程。patch,意为“补丁”即指对旧的VNode修补打补丁从而得到新的VNode非常形象哈。那不管叫什么其本质都是把对比新旧两份VNode的过程。我们在下面研究patch过程的时候一定把握住这样一个思想所谓旧的VNode(即oldVNode)就是数据变化之前视图所对应的虚拟DOM节点而新的VNode是数据变化之后将要渲染的新的视图所对应的虚拟DOM节点所以我们要以生成的新的VNode为基准对比旧的oldVNode如果新的VNode上有的节点而旧的oldVNode上没有那么就在旧的oldVNode上加上去如果新的VNode上没有的节点而旧的oldVNode上有那么就在旧的oldVNode上去掉如果某些节点在新的VNode和旧的oldVNode上都有那么就以新的VNode为准更新旧的oldVNode从而让新旧VNode相同。
可能你感觉有点绕没关系我们在说的通俗一点你可以这样理解假设你电脑上现在有一份旧的电子版文档此时老板又给了你一份新的纸质板文档并告诉你这两份文档内容大部分都是一样的让你以新的纸质版文档为准把纸质版文档做一份新的电子版文档发给老板。对于这个任务此时你应该有两种解决方案一种方案是不管它旧的文档内容是什么样的统统删掉然后对着新的纸质版文档一个字一个字的敲进去这种方案就是不用费脑就是受点累也能解决问题。而另外一种方案是以新的纸质版文档为基准对比看旧的电子版文档跟新的纸质版文档有什么差异如果某些部分在新的文档里有而旧的文档里没有那就在旧的文档里面把这些部分加上如果某些部分在新的文档里没有而旧的文档里有那就在旧的文档里把这些部分删掉如果某些部分在新旧文档里都有那就对比看有没有需要更新的最后在旧的文档里更新一下最终达到把旧的文档变成跟手里纸质版文档一样完美解决。
对比以上两种方案显然你和Vue一样聪明肯定会选择第二种方案。第二种方案里的旧的电子版文档对应就是已经渲染在视图上的oldVNode新的纸质版文档对应的是将要渲染在视图上的新的VNode。总之一句话以新的VNode为基准改造旧的oldVNode使之成为跟新的VNode一样这就是patch过程要干的事。
说了这么多听起来感觉好像很复杂的样子其实不然我们仔细想想整个patch无非就是干三件事
创建节点新的VNode中有而旧的oldVNode中没有就在旧的oldVNode中创建。删除节点新的VNode中没有而旧的oldVNode中有就从旧的oldVNode中删除。更新节点新的VNode和旧的oldVNode中都有就以新的VNode为准更新旧的oldVNode。
OK到这里你就对Vue中的patch过程理解了一半了接下来我们就逐个分析看Vue对于以上三件事都是怎么做的。
3. 创建节点
在上篇文章中我们分析了VNode类可以描述6种类型的节点而实际上只有3种类型的节点能够被创建并插入到DOM中它们分别是元素节点、文本节点、注释节点。所以Vue在创建节点的时候会判断在新的VNode中有而旧的oldVNode中没有的这个节点是属于哪种类型的节点从而调用不同的方法创建并插入到DOM中。
其实判断起来也不难因为这三种类型的节点其特点非常明显在源码中是怎么判断的
// 源码位置: /src/core/vdom/patch.js
function createElm (vnode, parentElm, refElm) {const data vnode.dataconst children vnode.childrenconst tag vnode.tagif (isDef(tag)) {vnode.elm nodeOps.createElement(tag, vnode) // 创建元素节点createChildren(vnode, children, insertedVnodeQueue) // 创建元素节点的子节点insert(parentElm, vnode.elm, refElm) // 插入到DOM中} else if (isTrue(vnode.isComment)) {vnode.elm nodeOps.createComment(vnode.text) // 创建注释节点insert(parentElm, vnode.elm, refElm) // 插入到DOM中} else {vnode.elm nodeOps.createTextNode(vnode.text) // 创建文本节点insert(parentElm, vnode.elm, refElm) // 插入到DOM中}} 从上面代码中我们可以看出
判断是否为元素节点只需判断该VNode节点是否有tag标签即可。如果有tag属性即认为是元素节点则调用createElement方法创建元素节点通常元素节点还会有子节点那就递归遍历创建所有子节点将所有子节点创建好之后insert插入到当前元素节点里面最后把当前元素节点插入到DOM中。判断是否为注释节点只需判断VNode的isComment属性是否为true即可若为true则为注释节点则调用createComment方法创建注释节点再插入到DOM中。如果既不是元素节点也不是注释节点那就认为是文本节点则调用createTextNode方法创建文本节点再插入到DOM中。 代码中的nodeOps是Vue为了跨平台兼容性对所有节点操作进行了封装例如nodeOps.createTextNode()在浏览器端等同于document.createTextNode() 以上就完成了创建节点的操作其完整流程图如下 4. 删除节点
如果某些节点再新的VNode中没有而在旧的oldVNode中有那么就需要把这些节点从旧的oldVNode中删除。删除节点非常简单只需在要删除节点的父元素上调用removeChild方法即可。源码如下
function removeNode (el) {const parent nodeOps.parentNode(el) // 获取父节点if (isDef(parent)) {nodeOps.removeChild(parent, el) // 调用父节点的removeChild方法}}5. 更新节点
创建节点和删除节点都比较简单而更新节点就相对较为复杂一点了其实也不算多复杂只要理清逻辑就能理解了。
更新节点就是当某些节点在新的VNode和旧的oldVNode中都有时我们就需要细致比较一下找出不一样的地方进行更新。
介绍更新节点之前我们先介绍一个小的概念就是什么是静态节点我们看个例子
p我是不会变化的文字/p上面这个节点里面只包含了纯文字没有任何可变的变量这也就是说不管数据再怎么变化只要这个节点第一次渲染了那么它以后就永远不会发生变化这是因为它不包含任何变量所以数据发生任何变化都与它无关。我们把这种节点称之为静态节点。
OK有了这个概念以后我们开始更新节点。更新节点的时候我们需要对以下3种情况进行判断并分别处理 如果VNode和oldVNode均为静态节点 我们说了静态节点无论数据发生任何变化都与它无关所以都为静态节点的话则直接跳过无需处理。 如果VNode是文本节点 如果VNode是文本节点即表示这个节点内只包含纯文本那么只需看oldVNode是否也是文本节点如果是那就比较两个文本是否不同如果不同则把oldVNode里的文本改成跟VNode的文本一样。如果oldVNode不是文本节点那么不论它是什么直接调用setTextNode方法把它改成文本节点并且文本内容跟VNode相同。 如果VNode是元素节点 如果VNode是元素节点则又细分以下两种情况 该节点包含子节点 如果新的节点内包含了子节点那么此时要看旧的节点是否包含子节点如果旧的节点里也包含了子节点那就需要递归对比更新子节点如果旧的节点里不包含子节点那么这个旧节点有可能是空节点或者是文本节点如果旧的节点是空节点就把新的节点里的子节点创建一份然后插入到旧的节点里面如果旧的节点是文本节点则把文本清空然后把新的节点里的子节点创建一份然后插入到旧的节点里面。 该节点不包含子节点 如果该节点不包含子节点同时它又不是文本节点那就说明该节点是个空节点那就好办了不管旧节点之前里面都有啥直接清空即可。
OK处理完以上3种情况更新节点就算基本完成了接下来我们看下源码中具体是怎么实现的源码如下
// 更新节点
function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {// vnode与oldVnode是否完全一样若是退出程序if (oldVnode vnode) {return}const elm vnode.elm oldVnode.elm// vnode与oldVnode是否都是静态节点若是退出程序if (isTrue(vnode.isStatic) isTrue(oldVnode.isStatic) vnode.key oldVnode.key (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))) {return}const oldCh oldVnode.childrenconst ch vnode.children// vnode有text属性若没有if (isUndef(vnode.text)) {// vnode的子节点与oldVnode的子节点是否都存在if (isDef(oldCh) isDef(ch)) {// 若都存在判断子节点是否相同不同则更新子节点if (oldCh ! ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)}// 若只有vnode的子节点存在else if (isDef(ch)) {/*** 判断oldVnode是否有文本* 若没有则把vnode的子节点添加到真实DOM中* 若有则清空Dom中的文本再把vnode的子节点添加到真实DOM中*/if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, )addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)}// 若只有oldnode的子节点存在else if (isDef(oldCh)) {// 清空DOM中的子节点removeVnodes(elm, oldCh, 0, oldCh.length - 1)}// 若vnode和oldnode都没有子节点但是oldnode中有文本else if (isDef(oldVnode.text)) {// 清空oldnode文本nodeOps.setTextContent(elm, )}// 上面两个判断一句话概括就是如果vnode中既没有text也没有子节点那么对应的oldnode中有什么就清空什么}// 若有vnode的text属性与oldVnode的text属性是否相同else if (oldVnode.text ! vnode.text) {// 若不相同则用vnode的text替换真实DOM的文本nodeOps.setTextContent(elm, vnode.text)}
}上面代码里注释已经写得很清晰了接下来我们画流程图来梳理一下整个过程流程图如下 通过对照着流程图以及代码相信更新节点这部分逻辑你很容易就能理解了。
另外你可能注意到了如果新旧VNode里都包含了子节点那么对于子节点的更新在代码里调用了updateChildren方法而这个方法的逻辑到底是怎样的我们放在下一篇文章中展开学习。
6. 总结
在本篇文章中我们介绍了Vue中的DOM-Diff算法patch过程。我们先介绍了算法的整个思想流程然后通过梳理算法思想了解了整个patch过程干了三件事分别是创建节点删除节点更新节点。并且对每件事情都对照源码展开了细致的学习画出了其逻辑流程图。另外对于更新节点中如果新旧VNode里都包含了子节点我们就需要细致的去更新子节点关于更新子节点的过程我们在下一篇文章中展开学习。
