软件教程 2025年08月6日
0 收藏 0 点赞 212 浏览 1135 个字
摘要 :

文章目录 一、passive修饰符的作用 二、代码示例 三、浏览器默认设置与passive的关系 Vue中,passive修饰符是一个很实用的功能,不少开发者可能对它的了解还不够深入。……




  • 一、passive修饰符的作用
  • 二、代码示例
  • 三、浏览器默认设置与passive的关系

Vue中,passive修饰符是一个很实用的功能,不少开发者可能对它的了解还不够深入。今天咱们就来详细聊聊passive修饰符的使用场景

一、passive修饰符的作用

passive修饰符的主要作用是让事件的默认行为立即执行,而不用等事件回调函数执行完。拿常见的滚动事件来说,正常情况下,浏览器得等JavaScript的事件处理函数(比如onscroll)全部执行完,才会去处理页面滚动的动作。要是事件处理函数里的代码比较复杂、执行时间长,页面滚动起来就会一卡一卡的,很不流畅。

但要是给滚动事件加上passive修饰符,滚动条就会马上滚动,不用等滚动事件的回调函数执行结束。这样一来,用户在操作页面滚动时,体验会好很多。

二、代码示例

先看下面这段代码:

function demo(){
    for (let i = 0; i < 200000; i++) {
        console.log(\'#\'+ i)
    }
}
<div style=\"overflow: scroll;border: 10px dotted blue;height: 400px;\" @scroll.passive=\"demo\">
  <ol>
    <li v-for=\"n in 50\">{{ n }}</li>
  </ol>
</div>

在这段代码里,div元素设置了overflow: scroll,表示它有滚动条。当给@scroll事件加上passive修饰符并绑定demo函数后,你会发现,滚动条能先滚动,之后才执行demo函数里的代码。要是不加passive修饰符,就得等demo函数执行完,滚动条才会滚动,这期间页面会有明显的卡顿,用户体验很差。

三、浏览器默认设置与passive的关系

实际上,为了优化用户体验,大部分浏览器(Safari和Internet Explorer除外)都把文档级节点WindowDocumentDocument.body上的wheelmousewheeltouchstarttouchmove这些事件的passive默认值改成了true。这么做之后,事件监听器就没办法取消这些事件了,而且在用户滚动页面时,也不会阻止页面的正常呈现。

看下面这个示例代码:

window.addEventListener(\'wheel\', (event) => {
  for(var a=0;a<20000;a++) {
    console.log(\'window\', a)
  }
}, { passive: true });

当把passive设为true时,页面滚动起来非常顺滑;要是设为false,滚动就会变得卡顿。不过,需要注意的是,scroll事件并不受这种默认设置的影响。

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/6859.html

管理员

相关推荐
2025-08-06

文章目录 一、Promise基础回顾 二、Promise 与 axios 结合使用场景及方法 (一)直接返回 axios …

269
2025-08-06

文章目录 一、模块初始化时的内部机制 二、常见导出写法的差异分析 (一)写法一:module.exports…

107
2025-08-06

文章目录 一、ResizeObserver详解 (一)ResizeObserver是什么 (二)ResizeObserver的基本用法 …

683
2025-08-06

文章目录 一、前期准备工作 (一)下载相关文件 (二)安装必要工具 二、处理扣子空间生成的文件…

338
2025-08-06

文章目录 一、官方文档 二、自动解包的数据类型 ref对象:无需.value即可访问 reactive对象:保持…

371
2025-08-06

文章目录 一、Hooks的工作原理 二、在if语句中使用Hook会出什么岔子? 三、React官方的Hook使用规…

843
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号