Vue3性能提升表现在哪几方面？

[GGXXMM]

从 Vue3源码 来看，Vue3 性能提升主要从”响应式、编译、源码体积“三个方面来实现的。

一、响应式升级

	Vue2 Object.defineProperty	Vue3 Proxy
对象嵌套属性	递归遍历监听	代理监听外层对象即可（能拦截到每个属性”访问、赋值、删除“等操作）
数组变化监听	监听不到数组length变化	可以监听数组变化

二、编译优化

Vue2	Vue3
静态节点，未标记	静态节点增加静态标记 ，做了静态提升
静态节点仍会创建vdom进行diff比对	过滤静态节点，只对动态节点进行diff比对
-	事件监听缓存，若开启后，下次diff算法直接使用缓存

静态标记，从源码编译角度来对比分析Vue2、Vue3：

<div id="app">
  <div>
    static node
  </div>
  <div>
    {{ count }}
  </div>
</div>

Vue2 render编译后：

Vue2 没有做静态标记，静态节点执行render函数，仍会创建vdom，进行diff。

Vue3 render编译后：

Vue3做了静态提升，静态节点会被标记为 -1，表示不进行diff；动态节点才进行diff。

参考：Vue template explorer

三、源码体积优化

• Vue3移除了一些不常用的API
• Tree Shaking的支持，优化打包体积