加 .passive 修饰符可避免滚动卡顿，因它提前告知浏览器不阻止默认滚动，跳过 preventdefault() 检查；适用于 scroll、touchmove 等原生滚动事件，不可与 .prevent 等混用。

直接在滚动或触摸事件上加 .passive 修饰符，就能让浏览器跳过对 preventDefault() 的检查，从而避免滚动卡顿。它不是“让滚动变快”，而是“不让浏览器等你”。

为什么滚动会卡？浏览器在等你表态

移动端每次滚动或滑动，都会高频触发 touchmove 或 scroll 事件。浏览器默认会先暂停默认滚动行为，检查你的事件处理函数里有没有调用 event.preventDefault() —— 即使你根本没写这句，它也得查一遍。这个检查过程占用主线程，积少成多就造成明显卡顿。

Vue-router参考手册

Vue-router参考手册下载

下载

加上 .passive 就等于提前告诉浏览器：“我绝不会阻止默认滚动，请立刻执行，别等我。”

怎么写？语法简单但位置关键

• 正确写法：@scroll.passive="handleScroll" 或 @touchmove.passive="handleTouch"
• 错误写法：@scroll.prevent.passive —— .prevent 和 .passive 冲突，浏览器会报错或忽略 passive
• 不能和 .stop、.self 等混用在同一个事件上（虽然语法不报错，但逻辑混乱）
• 只适用于原生滚动事件：常见于 scroll、touchstart、touchmove；对 click、input 等无效

哪些场景必须加？哪些可以不加？

• 必须加：自定义下拉刷新、滚动加载更多、吸顶导航、页面内长列表滚动监听 —— 只要涉及频繁滚动且不需要阻止默认行为
• 不能加：需要禁止滚动的场景，比如弹窗遮罩层上想禁掉背景滚动（这时得用 .prevent，而非 .passive）
• 可选但推荐：普通容器滚动（如 <div class="list">），哪怕只是展示内容，加了也能提升触控响应速度 <h3>Vue 3 中要注意的细节</h3> <p>Vue 3 仍支持 <code>@scroll.passive，但需注意：
  • 不再提供 .native 修饰符，子组件绑定原生滚动事件需用 v-bind="$attrs" 或显式暴露事件
  • 若使用 Composition API，事件绑定方式不变，修饰符写法一致：<div> <li>服务端渲染（SSR）中 passive 不生效（无 DOM），但客户端激活后自动生效，无需额外处理</li> </div>