②Vue3 性能比Vue2好的原因（diff算法优化、静态提升、事件侦听器缓存）

港控/mmm° 2022-11-22 05:14 125阅读 0赞

### Vue3 ###

*  diff算法优化
 *  静态提升 hoistStatic
 *  事件侦听器缓存 cacheHandlers

--------------------

**写下博客主要用来分享知识内容，并便于自我复习和总结。  
如有错误之处，请各位大佬指出。**

--------------------

# diff算法优化 #

首先，diff算法是虚拟DOM技术的必然产物，它会对新旧虚拟DOM作对比（即diff），然后将变化的地方更新在真实DOM上。而这其中，如何快速的判别需要变化的内容，就是Vue3.0的提升。具体来看：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter]  
在Vue2.0当中，当数据发生变化，它就会新生成一个DOM树，并和之前的DOM树进行比较，找到不同的节点然后更新。但这比较的过程是全量的比较，也就是每个节点都会彼此比较。但其中很显然的是，有些节点中的内容是不会发生改变的，那我们对其进行比较就肯定消耗了时间。所以在Vue3.0当中，就对这部分内容进行了优化：在创建虚拟DOM树的时候，会根据DOM中的内容会不会发生变化，添加一个静态标记。那么之后在与上次虚拟节点进行对比的时候，就只会对比这些带有静态标记的节点。  
![在这里插入图片描述][20201103153614831.png_pic_cnter]  
为了方便看到结果，我们将代码转成Vue3源码就可看到效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 1]  
对于这个静态标记为什么是数字1，PatchFlags目录中有详细叙述：

export const enum PatchFlags { 
      // 动态文本节点
      TEXT = 1,
    
      // 动态 class
      CLASS = 1 << 1, // 2
    
      // 动态 style
      STYLE = 1 << 2, // 4
    
      // 动态属性，但不包含类名和样式
      // 如果是组件，则可以包含类名和样式
      PROPS = 1 << 3, // 8
    
      // 具有动态 key 属性，当 key 改变时，需要进行完整的 diff 比较。
      FULL_PROPS = 1 << 4, // 16
    
      // 带有监听事件的节点
      HYDRATE_EVENTS = 1 << 5, // 32
    
      // 一个不会改变子节点顺序的 fragment
      STABLE_FRAGMENT = 1 << 6, // 64
    
      // 带有 key 属性的 fragment 或部分子字节有 key
      KEYED_FRAGMENT = 1 << 7, // 128
    
      // 子节点没有 key 的 fragment
      UNKEYED_FRAGMENT = 1 << 8, // 256
    
      // 一个节点只会进行非 props 比较
      NEED_PATCH = 1 << 9, // 512
    
      // 动态 slot
      DYNAMIC_SLOTS = 1 << 10, // 1024
    
      // 静态节点
      HOISTED = -1,
    
      // 指示在 diff 过程应该要退出优化模式
      BAIL = -2
    }

--------------------

# 静态提升 hoistStatic #

在Vue中无论元素是否参与更新，每次都会重新创建，然后再渲染。如下图所示，每次都会createVNode。  
![在这里插入图片描述][20201103153928184.png_pic_enter]  
但是在Vue3中使用了静态提升后，对于不参与更新的元素，只会被创建一次，在渲染时直接复用即可：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter]

--------------------

# 事件侦听器缓存 cacheHandlers #

默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化，但是因为是同一个函数，所以没必要去追踪它的变化，想办法将它直接缓存起来复用就会提升性能。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 1]  
从上图就可以看到，onClick果然会被视为动态绑定，它有静态标记，查看刚才提到的目录中发现，8是动态属性。开启cacheHandlers后，静态标记就不存在了，那么这部分内容也就不会进行比较了。  
![在这里插入图片描述][20201103154330191.png_pic_enter]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter]: /images/20221120/a6894e5eccb449089a544b8e7545e3bb.png
[20201103153614831.png_pic_cnter]: /images/20221120/3e6d7d22aec5451e8e88f0dbd8cd1730.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 1]: /images/20221120/a6bab2ae02b549b5be16825d9e0e73d9.png
[20201103153928184.png_pic_enter]: /images/20221120/d540edd7ed984fb5aaa9ba7c865b9595.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter]: /images/20221120/622aae86546341b8a0e1a999a081c3f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 1]: /images/20221120/f9aa7d38dd14475ab1056ac6a11ab3e7.png
[20201103154330191.png_pic_enter]: /images/20221120/9a030cdbbd9949ca90995a1b78ee01b4.png