对比Vue2.x的Vue3.0 性能提升
性能提升
响应式系统升级
- vue2.x响应式系统的核心是defineProperty
- vue3.0使用Proxy重新响应式系统
- 可以监听动态新增的属性
- 可以监听删除的属性
- 可以监听数组的索引和length属性
编译优化
- vue2.x 在每次组件渲染都会通过diff算法形成dom树，节点之间会进行对比，没有变化的节点也会进行对比，这会非常消耗性能
- vue3.0 新增标记,静态节点提升,Fragments和缓存事件处理函数
- 标记：在为这些元素生成渲染代码的时候，vue在生成虚拟dom直接对需要更新的类型进行编码，组件更新渲染器直接对编码查找更新
- 静态节点提升：组件渲染跳过静态节点，只需要更新动态节点的内容从而提升性能
- Fragments: vue2.x中编写每个组件都需要一个父级标签进行包裹，在vue3.0中可以不需要进行包裹，内部会默认添加Fragments
- 缓存事件处理函数：vue3.0会对事件进行缓存，将事件缓存到_cache对象中，将来再次调用直接从_cache中读取缓存，缓存的函数不会发生变化
源码体积优化
- vue3.0移除一些不常用的API，通过编译阶段的静态分析找到没有引入的模块，在打包时过滤掉，减少打包体积
