Vue 3.0 到底怎么变快

1、diff算法优化,举例说明

        vue2.0

图片

         vue3.0(diff算法加标记)

图片

2、静态提升

        举例:

  • 这就好比你每天去便利店买咖啡,每次买的时候店员都问你需要什么,当时间久了店员熟悉了你的习惯就省去了店员问你'要什么'的这个过程,直接给你所需要的商品。

  • 顾名思义静态提升就是把不参与更新的静态元素给提升出来,说白了就是类似把变量变成常量不进行重新创建

使用

图片

未使用

图片

 3、事件侦听器缓存

  • 如果我们用的这个函数从头到尾都没有改变过,那是不是也可以让它像静态元素一样不进行对比呢?

  • 那我都这么问了答案肯定是:可以的!

  • 顾名思义事件侦听器缓存就是把没有改变过的事件给侦听到了,然后缓存。

  • 就好比刚学Vue的你不懂各种api和优秀的组件,每次用到的时候都会去查看看怎么做,但是当你做久了之后自然你就熟能生巧了,没有得到消息说api更新了,自然就不会去查找文档对比有什么差异。

未使用:

图片

使用:

图片

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值