核心目的是提升滚动流畅度，因浏览器可跳过等待js执行而立即响应默认行为；必须加passive的场景包括监听touchstart/touchmove/wheel/scroll且不调用preventdefault()；vue中用@event.passive语法，不可与.prevent共存。
在 Vue 模板中给触摸或滚动事件添加 passive 选项，核心目的是告诉浏览器：这个事件处理器**不会调用 preventDefault()**，因此浏览器可以跳过等待 JS 执行的等待阶段，立即响应默认行为（比如滚动、缩放），从而显著提升滚动流畅度。
什么时候必须加 passive
当监听的是 touchstart、touchmove、wheel 或 scroll 这类高频触发且常伴随默认行为的事件时，尤其在移动端或长列表场景下：
- 用户手指在列表上滑动时，页面要同步滚动 —— 但你的处理函数只做位置计算、不阻止滚动
- 实现自定义下拉刷新，但仅监听 touchstart/touchmove 来判断下拉距离，真正触发刷新前并不阻止默认滚动
- 做手势识别（如左右滑切换页），但希望原生滚动仍能正常工作
Vue 模板中怎么写
直接在事件修饰符里加 .passive，语法简洁明确：
注意：.passive 不能和 .prevent 同时使用，因为语义冲突 —— 你既说“不会阻止默认行为”，又说“要阻止”，浏览器会忽略 .prevent 或报错。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章