1. 编译阶段,主要有如下:
1.1 diff算法优化
vue3在diff算法中相比vue2增加了静态标记 关于这个静态标记,其作用是为了会发生变化的地方添加一个flag标记,在渲染过程中跳过静态节点的比较和更新,提高了渲染性能
1.2 静态提升
Vue3中对不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用 这样就免去了重复的创建节点,大型应用会受益于这个改动,免去了重复的创建操作,优化了运行时候的内存占用 Vue 3还对组件选项进行了优化,将静态属性提升到渲染函数外部,避免了每次渲染都重新创建这些属性的开销。
1.3 事件监听缓存
默认情况下绑定事件行为会被视为动态绑定,所以每次都会去追踪它的变化 Vue 3使用了更高效的事件处理机制,将事件处理函数缓存起来,避免了每次渲染都重新创建事件处理函数的开销
1.4 组件级别的异步更新
Vue 3允许在组件级别设置异步更新,只对需要更新的组件进行渲染,避免了全局更新的开销。
1.5 列表渲染的优化
Vue 3为列表渲染引入了新的动态更新策略,只会对发生变化的列表项进行更新,而不是重新渲染整个列表。
1.6 SSR优化
当静态内容大到一定量级时候,会用createStaticVNode方法在客户端去生成一个static node,这些静态node,会被直接innerHtml,就不需要创建对象,然后根据对象渲染
2. 源码体积
相比Vue2,Vue3整体体积变小了,除了移出一些不常用的API,再重要的是Tree shanking任何一个函数,如ref、reavtived、computed等,仅仅在用到的时候才打包,没用到的模块都被摇掉,打包的整体体积变小
3. 响应式系统
vue2中采用defineProperty来劫持整个对象,然后进行深度遍历所有属性,给每个属性添加getter和setter ,实现响应式 vue3采用proxy重写了响应式系统,因为proxy可以对整个对象进行监听,所以不需要深度遍历 如: 可以监听动态属性的添加 可以监听到数组的索引和数组length属性 可以监听删除属性