Vue3.0 的性能优化

1.diff算法优化

vue2.0 中虚拟dom 是全量对比；vue3.0 中新增了静态标记（patchFlag），只对比有PF的节点，并且通过Flag的信息对比节点的具体内容。
通俗来讲就是中解析模板字符串时，将纯静态元素与动态元素分开。静态元素放在children，动态元素放在dynamicChildren，diff时只比对dynamicChildren就可以了。

// Block - Block Tree
{
  tag: 'div',
  children: [
    { tag: 'h1', children: 'hello world!' },
  ],
  dynamicChildren: [
    // 所有子元素中动态的部分哦
    { tag: 'p', children: ctx.text, patchFlag: 1 /* TEXT */ },
  ]
}

2.剪枝 Tree Shaking

剪掉不必要的模块，没用到的模块不会打包到文件中。

3.静态树提升 Static Tree Hoisting

   简而言之就是做了个缓存，不参与更新的元素只会被创建一次，在下次渲染时直接复用就可以。那么对于非静态元素怎么办呢？那就看看它的属性，属性中的静态部分也是可以做静态提升的。尽最大可能将可静态提升的不分静态提升。

4.cacheHandlers 事件侦听器缓存

    默认情况下onClick 会被视为动态绑定，所以每次会追踪它的变化，但是没有变化，只要缓存起来。下次从缓存里面取就可以了。

5. 基于 Proxy 的观察者机制

Object.defineProperty是一个相对比较昂贵的操作，因为它直接操作对象的属性，颗粒度比较小。将它替换为es6的Proxy，在目标对象之上架了一层拦截，代理的是对象而不是对象的属性。这样可以将原本对对象属性的操作变为对整个对象的操作，颗粒度变大。

javascript引擎在解析的时候希望对象的结构越稳定越好，如果对象一直在变，可优化性降低，proxy不需要对原始对象做太多操作。