编译阶段
之前的编译阶段,做的事情无非是扫描树内节点,然后计算值,触发get函数和把watcher放入到dep中
- diff算法优化
vue3的diff算法在原来的基础上添加了静态标记,因为在实际的dom树中,很多节点实际上是不会发生变化的,用一个标记来区分会变化和不会变化的节点,在diff比较的时候只去比较那些会发生变化的节点,这样节约了很多不必要的操作,提升了性能。实际这个标志位的值分了很多情况,比如动态的class,动态的style,动态slot等等,不同标志位执行不同的操作,这样比原来的无脑比较更加精准。 - 重复利用不会变化的vnode
对于那些不会发生变化的节点,只会在初次渲染的时候去生成vnode,并记录这个值,后续重新更新渲染的时候直接使用之前的值,省去了重新create带来的开销。 - 利用监听器缓存
默认情况下绑定事件行为会被视为动态绑定,所以每次都会去追踪它的变化,下次diff算法的时候直接使用缓存 - SSR优化
当静态内容大到一定量级时候,会用createStaticVNode方法在客户端去生成一个static node,这些静态node,会被直接innerHtml,就不需要创建对象,然后根据对象渲染
使用tree shaking 优化代码大小
通过清除多余代码方式来优化项目打包体积的技术,具体就是很多函数只在用到的地方才导入
比如watch,ref,reactive,computed等等。
响应式系统
采用proxy替代defineProperty,避免了很多无脑递归遍历,提高了性能,解决了许多坑,具体看vue3 中用proxy代替defineProperty 实现数据拦截