Vue基础教程（77）事件修饰符之passive：别让页面卡成PPT！Vue的passive修饰符让你的应用丝滑如德芙

作为一个Vue开发者，不知道你有没有遇到过这样的场景：好不容易写完了一个酷炫的页面，结果在手机上测试时，滚动起来却卡得像在用十年前的山寨机。你百思不得其解——代码明明写得挺优雅的啊！

别急着怀疑人生，这很可能是因为你忽略了Vue事件处理中的一个重要功能：passive事件修饰符。今天，就让我带你深入浅出地了解这个能让你的应用从“卡顿大叔”变身“丝滑小哥”的神奇功能。

一、先来说说，这玩意儿到底为啥存在？

要理解passive，咱们得从浏览器处理事件的小秘密说起。

想象一下这样的场景：你在超市排队结账，收银员每扫一个商品都要停下来问一句：“这个能扫吗？”你是不是很想说：“您就直接扫吧，别问了！”

在浏览器世界里，类似的事情每天都在发生。当用户滚动页面时，浏览器心里很纠结：“我要不要等那些JavaScript事件处理函数执行完再滚动呢？万一它们调用了preventDefault()阻止我的默认行为怎么办？”

这种纠结导致了著名的“滚动阻塞”问题。特别是在移动端，如果浏览器每次滚动都要等事件处理器执行完毕，那用户体验简直就是灾难。

这时候，passive事件修饰符就像那个通情达理的顾客，直接告诉浏览器：“老兄，你放心滚吧，我保证不调用preventDefault()来阻止你。”

二、passive到底是什么鬼？

用技术术语来说，passive是addEventListener的一个选项，将其设置为true表示监听器永远不会调用preventDefault()。这样浏览器就可以放心大胆地立即执行默认行为，不用傻等着JavaScript执行完毕。

在Vue中，我们可以用超级简单的方式来使用它：@touchmove.passive或者@scroll.passive。

底层原理小课堂：
当你不使用passive时，浏览器的事件处理流程是这样的：

1. 用户触发事件（比如滚动）
2. 浏览器：“等等，我得先看看有没有事件监听器”
3. 执行你的JavaScript代码
4. 浏览器：“好了，现在可以滚动了”

使用passive后，流程变成了：

1. 用户触发事件
2. 浏览器直接开始滚动，同时异步执行你的JavaScr