Vue面试题43：Vue3性能提升体现在哪些方面？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

• 分析

  • vue3在设计时有几个目标：更小、更快、更友好，这些改进多数和性能相关，因此可以围绕介绍；

• 思路

  • 总述和性能相关的新特性；
  • 逐个说细节；
  • 能说点原理更佳；

• 回答范例

  • 我会分别从代码、编译和打包三个方面介绍vue3性能方面的提升
  • 代码层面性能优化主要体现在全新的响应式API，基于Proxy的实现，使得初始化时间和内存占用均大幅改进；
  • 编译层面做了更多编译优化处理，比如静态提升、动态内容标记（patch flag）、事件缓存，区块等，可以patch过程中有效跳过大量的diff过程；
  • 打包时更好的支持tree-shaking，因此整体体积更小，加载更快；

• 补充

• 为什么基于Proxy的响应式会更快

  • Proxy是ES6标准原生支持，在初始化时会进行懒处理，不会做对象的深层次嵌套，只有用户访问时才进行拦截，因此初始化时间和内存占用都会更小；
  • 另外Vue3中依赖收集过程中会使用WeakMap、Map和Set保存响应式数据和副作用之间的依赖关系，更加轻量；