Vue3.0性能提升主要是通过哪几方面体现的？

Vue 3 与 Vue 2 相比：

在 bundle 包大小方面（tree-shaking 减少了 41% 的体积）
初始渲染速度方面（快了 55%）
更新速度方面（快了 133%）
内存占用方面（减少了 54%）

1、源码体积的优化

相比Vue2，Vue3整体体积变小了，除了移出一些不常用的API（如filter，inline-template），引入 tree-shaking 技术

tree-shaking，它的原理很简单，tree-shaking 依赖 ES2015 模块语法的静态结构（即 import 和 export），通过编译阶段的静态分析，找到没有引入的模块并打上标记。利用 tree-shaking 技术，如果你在项目中没有引入无关的组件，那么它们对应的代码就不会打包，这样也就间接达到了减少项目引入的 Vue.js 包体积的目的。如ref、reavtived、computed等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小。

Vue3.0 中最直接使用 tree-shaking 技术的一个例子，在 createApp 时会通过 ensureRenderer 创建渲染器对象，但是这里并不是直接创建渲染器对象，而是延时创建渲染器，目的是当用户只依赖响应式包的时候，可以通过 tree-shaking 移除核心渲染逻辑相关的代码。

2、编译阶段优化

vue2 更新粒度：组件级别的，vnode的更新性能跟模版大小正相关，跟动态节点数量无关
vue3 更新粒度：动态内容的数量相关，vnode的更新性能由与模板整体大小正相关，提升为与动态内容的数量相关

通过数据劫持和依赖收集，Vue.js 2.x 的数据更新并触发重新渲染的粒度是组件级的：

<template>
  <div id="content">
    <p class="text">1</p>
    <p class="text">2</p>
    <p class="text">3</p>
    <p class="text">{{message}}</p>
    <p class="text">4</p>
    <p class="text">5</p>
    <p class="text">6</p>
  </div>
</template>

虽然这段代码中只有一个动态节点，但在如果 message 发生改变，单个组件内部依然需要遍历该组件的整个 vnode 树，所以这里有很多 diff 和遍历其实都是不需要的，这就会导致 vnode 的性能跟模版大小正相关，跟动态节点的数量无关，当一些组件的整个模版内只有少量动态节点时，这些遍历都是性能的浪费。

回顾Vue2，我们知道每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把用到的数据property记录为依赖，当依赖发生改变，触发setter，则会通知watcher，从而使关联的组件重新渲染。
因此，Vue3在编译阶段，做了进一步优化：
Vue.js 3.0 做到了，它通过编译阶段对静态模板的分析，编译生成了 Block tree。Block tree 是一个将模版基于动态节点指令切割的嵌套区块，每个区块内部的节点结构是固定的，而且每个区块只需要以一个 Array 来追踪自身包含的动态节点。

借助 Block tree，Vue.js 将 vnode 更新性能由与模版整体大小相关提升为与动态内容的数量相关，这是一个非常大的性能突破。

① diff算法优化

vue3在diff算法中相比vue2增加了静态标记，其作用是为了会发生变化的地方添加一个flag标记，下次发生变化的时候直接找该地方进行比较。

② 静态提升

Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用。免去了重复的创建操作，优化内存。
没做静态提升之前，未参与更新的元素也在render函数内部，会重复创建
做了静态提升后，未参与更新的元素，被放置在render 函数外，每次渲染的时候只要取出即可。同时该元素会被打上静态标记值为-1，特殊标志是负整数表示永远不会用于 Diff。

③ 事件监听缓存

默认情况下绑定事件行为会被视为动态绑定（没开启事件监听器缓存），所以每次都会去追踪它的变化。开启事件监听器缓存后，没有了静态标记。也就是说下次diff算法的时候直接使用。

④ SSR优化

当静态内容大到一定量级时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。

3、响应式系统

vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式。 vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历。

  可以监听动态属性的添加
  可以监听到数组的索引和数组length属性
  可以监听删除属性