【 Vue 3】Vue3.0性能提升主要是通过哪几方面?

1. 编译阶段

回顾Vue2,我们知道每个组件实例都对应一个watcher实例,它会在组件渲染的过程中把用到的数据property记录为依赖,当依赖发生改变,触发setter,则会通知watcher ,从而使关联的组件重新渲染

<template> 
    <div id="content"> 
        <p class="text">节点 </p> 
        <p class="text">节点 </p> 
        <p class="text">{{ message }}</p> 
        <p class="text">节点 </p>
    </div>
</template>

可以看到,组件内部只有一个动态节点,剩余一堆都是静态节点,所以这里很多diff和遍历其实都是不需要的,造成性能浪费
因此,Vue3在编译阶段,做了进一步优化。主要有如下:

  • diff算法优化
  • 静态提升
  • 事件监听缓存
  • SSR优化

4.1 diff算法优化

vue3在diff算法中相比vue2增加了静态标记
关于这个静态标记,其作用是为了会发生变化的地方添加一个flag标记,下次发生变化的时候直接技该地方进行比较

4.2 静态提升

Vue3中对不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用
这样就免去了重复的创建节点,大型应用会受益于这个改动,免去了重复的创建操作,优化了运行时候的内存占用

4.3 事件监听缓存

默认情况下绑定事件行为会被视为动态绑定,所以每次都会去追踪它的变化
上述发现开启了缓存后,没有了静态标记。也就是说下次diff算法的时候直接使用

4.4 SSR优化

当静态内容大到一定量级时候,会用createStaticVNode方法在客户端去生成一个static node,这些静态node,会被直接innerHtml,就不需要创建对象,然后根据对象渲染

2. 源码体积

相比Vue2,Vue3整体体积变小了,除了移出一些不常用的API,再重要的是Tree shanking任何一个函数,如ref、reavtived、computed等,仅仅在用到的时候才打包,没用到的模块都被摇掉,打包的整体体积变小

3. 响应式系统

vue2中采用defineProperty来劫持整个对象,然后进行深度遍历所有属性,给每个属性添加getter和setter ,实现响应式
vue3采用proxy重写了响应式系统,因为proxy可以对整个对象进行监听,所以不需要深度遍历

  • 可以监听动态属性的添加
  • 可以监听到数组的索引和数组length属性
  • 可以监听删除属性
上一篇:代码随想录学习Day 18


下一篇:C语言——字符函数和字符串函数(上)