vue3.0系列 —— 浅谈vue3.0性能优化

╰半夏微凉° 2021-09-07 23:28 440阅读 0赞

# 关于Vue3.0和鱿鱼西 #

vue3.0本质上是对vue2.0的一次项目重构，从3.0的版本更新中你可以看到很多自己工作中的影子。  
比如本章要讲的性能优化纯粹是因为之前的代码过于暴力求解，需要一些“设计模式”来重新优化一下之前写的不怎么漂亮的代码。  
除此之外，之前遗留的一些历史问题也因为编译工具提供的一些新的API（Proxy）成功解决了。  
在这之上，尤大还借鉴了一些react的设计方法（HOOKS），顺便学了下TS，并用TS重构了代码。  
vue3.0的更新实际就是鱿大个人的技术更新，你能从这个新的框架里看到尤大这些年的技术成长。  
总之一句话，我没觉得vue3.0屌在哪里，我就是单纯写不出来而已（手动滑稽）。

# DIFF算法优化 #

对vue有点基础的应该都知道vue生成dom的方式是通过 ’虚拟dom‘ 渲染 。下面我通过代码简单来阐述下虚拟dom是什么？

上面是很简单的两个html,vue会将这段dom转换成js代码，“可能”如下所示：

[{ 
      html:'div',
      text:'哈哈',
      class:'xxhh',
      children:null
    },
    { 
      html:'div',
      text:'$msg',
      children:null
    }]

生成的这段跟dom结构一样的树形js代码就是虚拟dom了。  
把虚拟dom树交给一个render()函数处理一下就能生成我们肉眼可见的html了。  
那Diff()算法是用来干嘛的呐？  
简单点说：diff算法用于比较js树的更新，当执行一次更新模板的操作后，diff算法用于比较更新的内容是什么，并告诉render()函数哪里需要更新。比如当msg变量更新后，diff算法就会通过全量比较得出一个结论，msg变了，所以跟msg相关的dom节点都需要更新。diff算法的作用我们已经知道了，用代码实现如下：

function diff(oldDom,newDom){ 
     // oldDom 和 newDom 一一比较
     return needUpdateDom
    }

由于虚拟dom树里存在大量"不可能改变"的静态节点，导致很多比较都是毫无意义的比较，因此Diff算法针对这个情况做了一点优化，**只给可能发生改变的节点添加“标记”**，以减少比较的次数。  
说实话这个优化正常人都想得到。我上我也行！

# 静态变量提升 #

听起来很牛逼，其实毛都没有，只是在用于渲染的render()函数里把那些不需要被反复创建的变量进行一个提的升，看新旧代码对比就知道了。  
以前的render函数

function render(){ 
      createNode('静态dom')
      createNode('静态dom')
      createNode('静态dom')
      createNode('静态dom')
      createNode('动态dom')
      //...
      return allNode
    }

现在的render函数

const nodeCatch =  [createNode('静态dom'),createNode('静态dom'), createNode('静态dom'),createNode('静态dom')]
    function render(){ 
      createNode('动态dom')
      //...
      return nodeCatch 拼一个 allNode
    }

只创建一次静态变量，多么伟大的性能优化！（手动滑稽）