vue diff算法

旧城等待， 2022-12-22 09:27 154阅读 0赞

##### 1. 概览图 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ_size_16_color_FFFFFF_t_70_pic_center]

##### 2. `isSameNode` #####

function sameVnode (a, b) { 
      return (
      	// key值
        a.key === b.key &&  
        // 标签名
        a.tag === b.tag &&  
        // 是否为注释节点
        a.isComment === b.isComment &&  
        // 是否都定义了data，data包含一些具体信息，例如onclick , style
        isDef(a.data) === isDef(b.data) &&  
        // 当标签是<input>的时候，type必须相同
        sameInputType(a, b) 
      )
    }

##### 3. O(n³) 到 O(n) 的转变 #####

> 假设树的结点树为n

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

> [diff算法详解][diff]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/7f2e895c63f644bca5938f5fb6a580fd.png
[diff]: https://www.cnblogs.com/wind-lanyan/p/9061684.html

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

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

相关阅读

相关 diff算法原理、 Vue、React区别

目录传统Diff算法 React优化Diff算法 Vue的Diff算法在了解Vue和React的区别之前，我们首先来了解一下MVC和MVVM架构，这个知识点有助于我

Myth丶恋晨/ 2024年03月31日 11:06/ 0 赞/ 73 阅读

相关 vue dom diff算法

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

电玩女神/ 2023年02月14日 10:38/ 0 赞/ 12 阅读

相关 vue中的diff算法

一、是什么diff算法先来一句概念： > diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新

朴灿烈づ我的快乐病毒、/ 2023年01月07日 07:06/ 0 赞/ 168 阅读

相关 vue diff算法

1. 概览图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

旧城等待，/ 2022年12月22日 09:27/ 0 赞/ 155 阅读

相关 vue核心面试题：diff算法

一、diff算法的时间复杂度两个树的完全的 diff 算法是一个时间复杂度为 O(n3) , Vue 进行了优化·O(n3) 复杂度的问题转换成 O(n) 复杂度的问

小灰灰/ 2022年11月27日 00:48/ 0 赞/ 291 阅读

相关 Vue 3.0 diff 算法及原理

![9d5b96788991b94143be44f8efdca8e3.png][] > 转自：GitHub - liuhanqu Vue 3.0 采取的 diff 算

深碍√TFBOYSˉ_/ 2022年11月13日 05:29/ 0 赞/ 147 阅读

相关 Vue3diff算法原理和优化

关注前端公众号【前端每日一博】 ![c46f65a31c1e140b3cb6b0332979c093.gif][] 前言面试官：你知道 V

野性酷女/ 2022年11月04日 14:22/ 0 赞/ 140 阅读

相关解析vue2.0的diff算法

目录前言 virtual dom 分析diff 总结前言 vue2.0加入了virtual dom，有向react靠拢的意思。vue的

谁借莪１个温暖的怀抱￠/ 2022年04月02日 12:28/ 0 赞/ 173 阅读

相关浅析vue2.0的diff算法

一、前言如果不了解virtual dom，要理解diff的过程是比较困难的。虚拟dom对应的是真实dom，使用document.CreateElement 和 d

川长思鸟来/ 2022年03月07日 17:16/ 0 赞/ 216 阅读

相关浅析vue2.0的diff算法

一、前言如果不了解virtual dom，要理解diff的过程是比较困难的。虚拟dom对应的是真实dom，使用document.CreateElement 和 d

Myth丶恋晨/ 2022年03月07日 17:14/ 0 赞/ 163 阅读