vue项目的性能优化

结合lighthouse数据,可从代码、打包、部署三个层面优化Vue项目性能。代码层面涉及指令使用、数据处理、防抖节流等;打包层面包括提取公共代码、减少冗余代码等;部署层面有开启gzip压缩、部署静态资源到CDN、设置缓存策略等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

结合lighthouse查看各项数据,不断进行性能优化,可以从代码、打包、部署这三个层面来优化

代码层面

1、v-if和v-show区分使用

  • v-if(惰性的)用的条件判断,是惰性的,false的话初始不会渲染,适用于运行很少改变条件
  • v-show不管是什么初始都会渲染,用的display: none来控制隐藏,适用于频繁切换条件的

2、computed、watch和methods区分使用

  • computed:
    • 一个数据受多个数据影响
    • 数据要经过开销很大的计算(如遍历一个很大的数组并做大量计算),可以用computed的缓存特性,只有数据发生变化才会重新计算,否则直接返回缓存
  • watch:
    • 一个数据影响多个数据的
    • 数据变化时,需要执行异步或开销大的操作(比如:请求API)
  • methods:
    • 希望数据要实时更新,不需要缓存

3、v-for避免同时使用v-if(要知道优先级why)

  • v-for优先级要比v-if高,每次渲染都要先遍历进行条件判断,增加了计算成本
  • 可以在computed提前把v-if的数据项给过滤掉

优先级why:vue在编译模板时,会先检测模板中的指令,将模板解析成AST,再根据AST生成对应的render函数。它会先将v-for指令转换成一个生成Vnode的函数,并生成对应的Vnode数组,再会根据v-if的条件来决定是否渲染每个Vnode

4、v-for循环添加key(会问 什么是diff?why提高速度?)

  • 设置唯一的key,能精确找到该数据,数据改变时能较快定位到diff

diff算法目的是找出差异,最小化更新视图,发生在视图更新阶段,当数据发生变化的时候,diff就对比新旧虚拟DOM,只渲染有变化的部分。

  • 1.对比是不是同类型标签,不是同类型直接替换
  • 2.是同类型标签,就执行patchVnode方法,判断新旧vnode是否相等
  • 3.相等就直接返回,不相等就要对比新旧节点,对比原则以新节点为主,主要分为以下几种:
    • newVnode和oldeVnode都有文本节点,就用新节点换旧节点
    • new有子节点,old没有,就增new的子节点
    • new没有子节点,old有,则删
    • 都有子节点,则通过updateChildren对比子节点

why提高速度:

  • 添加唯一key让diff准确识别每个节点,在列表更新时,可以准确判断出哪些节点被添加、删除、移动
  • 有key就可以通过map直接获得值得对比的旧节点的下标
  • 如果没有key就要通过循环旧节点数组用sameVnode去判断新节点和旧节点是否值得比较,值得才返回旧节点下标
  • 很显然map查找要比循环数组快

5、用Object.freeze()冻结不需要响应式变化的数据

vue初始化时,会对数据进行劫持,将数据都转换成响应式的,但有的时候只是想单纯展示数据,就可以跳过数据劫持

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值