vue diff算法

旧城等待， 2022-12-22 09:27 275阅读 0赞
1. 概览图

在这里插入图片描述

2. isSameNode
  1. function sameVnode (a, b) { 
  2.   return (
  3.       // key值
  4.     a.key === b.key &&  
  5.     // 标签名
  6.     a.tag === b.tag &&  
  7.     // 是否为注释节点
  8.     a.isComment === b.isComment &&  
  9.     // 是否都定义了data，data包含一些具体信息，例如onclick , style
  10.     isDef(a.data) === isDef(b.data) &&  
  11.     // 当标签是<input>的时候，type必须相同
  12.     sameInputType(a, b) 
  13.   )
  14. }
3. O(n³) 到 O(n) 的转变

假设树的结点树为n

  1. 传统 diff 算法 O(n³)：对两棵树的结点进行两两比较的开销为 O(n²)；而遍历完旧树后，没找到新树中的某个结点，就需要创建一个新结点（在旧中找到合适位置并插入一个新结点）的开销为O(n)，所以传统diff算法的时间复杂度为O(n³)
  2. vue diff 算法 O(n)：同层比较，每个结点只操作一次。

diff算法详解

发表评论

表情：
评论列表 （有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读