虚拟节点与DOM Diff算法源码实现【提薪面试必备】

等星星跌入怀中:
如果相同，直接返回，如果不同，一切以新的vnode为准 新vnode有children，旧的需要删除原来的text，添加新的children，或者更新children 新vnode有text，旧的需要删除原来的children，添加新的text，或者更新text PS：children 和 text 是互斥的，不会同时存在。

【回复】新老vnode 都有children ，更新children的时候需要用updateChildren[脱单doge]
delushushu:
jq时代： DOM操作 -》 视图更新 vue时代： 数据改变 -》虚拟DOM（计算）-》 操作真实的DOM -》 视图更新 虚拟DOM就是通过js模拟dom结构

呆美男:
一读源码就烧脑，才几分钟的视频看睡着好多次了

【回复】不错了 ，有哈默这些up的视频比自己干看好多了
美貌是第一生产力YY:
对于新的vnode有children的情况 如果老的vnode有children，则更新children 如果老的vnode有text，则清除text，添加children 那如果老的vnode既没有text也没有children呢？也是先清除text再添加children吗？和第二种一样的处理当时 还是说老的vnode一定要有text和children中的一个呢

【回复】假设老vnode啥也没有应该就直接替换了吧 啥都没有还比啥 直接creatElement把dom挂上去替换
狠友一丝:
updateChild里面，旧头比新尾，新头比旧尾的逻辑怎么不说呢？这才是最难理解的吧？看了这个人2个视频，都是在避重就轻啊。合适么这样？

【回复】免费视频没那么多讲究 要学会的话 要么自己搞 要么就花钱报人家的班[doge]
【回复】你说的太对了，这才是算法的关键，值得详细讲的。但是没有说
61249880876_bili:
标签名相同，key相同，还是要深度比较的吧，不然里边的子元素变了不能更新啊

【回复】应该是key不同直接认为是新的虚拟节点，不去做后续深度的比较了，需要全部替换
【回复】我当时也差点懵了，这样通常遍历第一个节点就卡住了哈哈
番茄爱上西红柿:
新的vnode有children的里面，为什么还要判断 (新vnode没有children、oldVnode有children啊)，大前提(新的vnode有children的里面)不是已经在最开始确定了吗

【回复】text和children不会同时存在，但可能会同时不存在
61249880876_bili:
第300行的注释‘新vnode 无text 有children’有问题哦，注释里的‘有children’应该去掉哦，因为下边有个条件是 if (isDef(oldCh)) {//新node无children， 老node有children removeVnodes(oldCh, 0, oldCh.length - 1); // 移除children }

MinatoAquaSama:
up主想请教一下上次面试被问到一个diff算法的问题还没搞懂：“为什么Vue2的那个头头尾尾比较了还得头尾、尾头比较，为什么不直接头头和尾尾比较了，如果都没有匹配再从Vdom的队头开始再去寻找看老的Vdom里面有没有对应的元素进行相应的移动和删除创建？”[笑哭]把我一下子问住了

【回复】你说的就是vue3采取的方式，只前后比较这块被称为预处理操作，印象整体流程也是参考其他diff算法来的。其实可以参考设计原理那本书，讲diff这块很清楚也有举例，vue2双端解决的问题相当于优化了节点移动的效率，vue3算是更进一步的优化。
Running-Burning:
我想问一下Vue是借鉴了Snabbdom.js的思想自己写了一个类似的，还是说直接照搬了源码过来[doge]

美貌是第一生产力YY:
是不是新老vnode都可以既没有text也没有children呢？如果有的话，text和children只能有一个，如果没有的话，text和children都可以没有，是这样的吗？

【回复】我也发现了，居然可以同时有，同时没有
sugarbong:
讲的很不错哦，很清晰[点赞]三连支持支持~

我是赵不悔:
希望能听到你讲better-scroll.目前B站没有讲过这个。[点赞][点赞][点赞][点赞]

【回复】回复 @哈默聊前端 :❤️你为世界充满爱
【回复】B站vue播放量最高的那个，项目中有使用better-scroll，有基本的使用讲解
呆美男:
看了这么就才知道哈默和小夏老师有关系，之前看小夏老师的视频看到哈默了[笑哭]