组件更新这块有点水哎

Question

我是跳着看的，对patch的diff算法比较好奇，所以先看了组件更新这块的逻辑，这块真的觉得有点水哎

个人感觉就是按代码讲了一下，但是关键的点还没讲到，比如updateChildren：
1. 为什么要对比oldStartIndex，oldEndIndex，new。。。这四个。
- 答：这是一种优化策略，如果直接上来遍历的话，会浪费很多性能，因为大多数情况下，我们只是组件中的某个元素发生了变化，而不是全部。
2. 当对比不成功如何处理，这里面又涉及了我们常见的要给循环里面的元素设置key的问题。
等等等

• 建议还是要将一些为什么要这么做，而不是流水的讲。

Answer 1

ustbhuangyi 2020-06-10 22:29:17

diff 算法性能上面的优势视频里有提到，不知道你有没有认真看。
多说一些为什么，这个建议我是接受的。课程有不少地方应该就是这种思路去讲的。

视频录制完了改不了，有些章节可能有地方没有讲好，不过你要有什么问题想讨论的，欢迎来问答区与我讨论。

PS: 你的答案我觉得也水，什么叫“如果直接上来遍历的话，会浪费很多性能”，能详细解释一下吗？

• 提问者 小星星要努力变强 #1

  1. diff 算法性能上面的优势视频里有提到，不知道你有没有认真看。
  答：看了组件更新1，2，3。略有枯燥，中间有一部分是跳着看的，稍后会重新看一下老师说的算法性能。
  2. 视频录制完了改不了，有些章节可能有地方没有讲好
  答：为什么改不了呢，我看也有说会更新vue3的部分，我觉得可以一起把第一期录制的觉得可以补充的地方重新录制上传呀。当然慕课网的规则我不太懂，仅建议。
  3. 你的答案我觉得也水，什么叫“如果直接上来遍历的话，会浪费很多性能”，能详细解释一下吗？
  答：这一块我也是看深入浅出vue再结合一些网上的文章。
  就是updateChildren的时候其实可以直接不走上面的oldindex，newIndex四个的对比，直接循环ch和oldCh找相同的vnode。
  但是当我们只是较小的修改时，使用oldindex，newIndex四个的对比就可以找到相同的vnode，这样会避免进行多次循环。避免浪费性能。
  
  PS：我只是觉得凭老师的实力再用心一些应该可以讲的更好的。不过看了视频还是学习到了很多的。忠言逆耳，嘻嘻嘻

• ustbhuangyi 回复 提问者 小星星要努力变强 #2

  双端比较的主要优势是在于最终尽可能用一种较少的 DOM 操作完成新旧子树的更新，而不是在于循环遍历次数导致的性能浪费。即使你顺序循环一次，也就是一个 O(n) 的复杂度，没有本质区别。
  
  再比如 Vue 3 的 diff，就是先同步遍历，再尾部遍历，然后通过求解最小递增子序列，找到移动、删除、添加节点的最优方式。而这些 diff 算法都是尽量去减少 DOM 操作，这个才是耗性能的点。
  
  课程是有很多不完善的地方，所以我希望的是通过问答区提问回答的交流方式，来补充课程一些没讲或者没讲好的知识点。
  
  PS: 忠言逆耳是没错，但是你上来就喷课程水，这就不仅仅是逆耳了，是刺耳，让人看了很不舒服，就像我说你的回答水，你第一反应肯定也是很不爽吧：）
  
  不过我还是愿意听到一些不同的声音，也希望多一些技术方面的交流和讨论，对事不对人，以技术为导向，我觉得怎么样都 ok。

• 提问者 小星星要努力变强 回复 ustbhuangyi #3

  两个疑问：
  1，尽可能用一种较少的DOM操作完成新旧子树的更新体现在哪里呢，通过什么方式减少了DOM操作呢
  2，if (sameVnode(vnodeToMove, newStartVnode)) {
              oldKeyToIdx(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)//不应该patchVnode吗
              oldCh[idxInOld] = undefined
              canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
            }

点开查看后面2条评论