vue3.0系列 —— 浅谈vue3.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是什么？

<div class='xxhh'>哈哈<div>
<div>{{msg}}</div>

上面是很简单的两个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
}

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