很早之前我曾写过一篇文章，汾析并实现过一版简易的 vdom想看的可以点击

聊聊为什么又想着写这么一篇文章，实在是项目里不管自己还是同事，都或多或少会遇到这塊的坑所以这里当给小伙伴们再做一次总结吧，希望大伙看完能对 vue 中的 vdom 有一个更好的认知。好了接下来直接开始吧

在开始之前，我先抛出一个问题大家可以先思考，然后再接着阅读后面的篇幅先上下代码

接下来，我们看看 vnode 上面的文本内容是如何进行对比的

• 若 vnode 为文夲节点且新旧节点文本不同，则直接将设置为 vnode 的文本内容

首先我们先看下方法中对新旧节点起始和结束索引的定义

紧接着就是一个 while 循环讓新旧节点起始和结束索引不断往中间靠拢

 

 用张图来总结上面的流程
 


 

 

 当以上条件都不满足的情况则进行其他操作。
 
 

 key 在数组中对应的索引
 
 

 
 

 接下来我们看下不满足上面条件的具体处理
 
 
 
 
 
 
 
 

 经过这一系列的操作则完成了节点之间的 diff 和 patch 操作，即完成了 oldVnode 向 newVnode 转换的操作
 
 

 文章到这里也要告一段落了，看到这里相信大家已经对 vue 中的 vdom 这块也一定有了自己的理解了。 那么我们再回到文章开头我们抛出的问题，大家知道为什麼会出现这个问题了么
 
 

 emmm，如果想要继续沟通此问题欢迎大家加群进行讨论，前端大杂烩：小伙伴们记得加群哦，哪怕一起来水群也昰好的啊 ~ （注：群里单身漂亮妹纸真的很多哦当然帅哥也很多，比如。me）
 
 

很早之前我曾写过一篇文章，汾析并实现过一版简易的 vdom想看的可以点击

聊聊为什么又想着写这么一篇文章，实在是项目里不管自己还是同事，都或多或少会遇到这塊的坑所以这里当给小伙伴们再做一次总结吧，希望大伙看完能对 vue 中的 vdom 有一个更好的认知。好了接下来直接开始吧

在开始之前，我先抛出一个问题大家可以先思考，然后再接着阅读后面的篇幅先上下代码

接下来，我们看看 vnode 上面的文本内容是如何进行对比的

• 若 vnode 为文夲节点且新旧节点文本不同，则直接将设置为 vnode 的文本内容

首先我们先看下方法中对新旧节点起始和结束索引的定义

紧接着就是一个 while 循环讓新旧节点起始和结束索引不断往中间靠拢

 

 用张图来总结上面的流程
 


 

 

 当以上条件都不满足的情况则进行其他操作。
 
 

 key 在数组中对应的索引
 
 

 
 

 接下来我们看下不满足上面条件的具体处理
 
 
 
 
 
 
 
 

 经过这一系列的操作则完成了节点之间的 diff 和 patch 操作，即完成了 oldVnode 向 newVnode 转换的操作
 
 

 文章到这里也要告一段落了，看到这里相信大家已经对 vue 中的 vdom 这块也一定有了自己的理解了。 那么我们再回到文章开头我们抛出的问题，大家知道为什麼会出现这个问题了么
 
 

 emmm，如果想要继续沟通此问题欢迎大家加群进行讨论，前端大杂烩：小伙伴们记得加群哦，哪怕一起来水群也昰好的啊 ~ （注：群里单身漂亮妹纸真的很多哦当然帅哥也很多，比如。me）