文
章
目
录
章
目
录
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除外）都把文档级节点Window、Document和Document.body上的wheel、mousewheel、touchstart和touchmove这些事件的passive默认值改成了true。这么做之后，事件监听器就没办法取消这些事件了，而且在用户滚动页面时，也不会阻止页面的正常呈现。
看下面这个示例代码：
window.addEventListener('wheel', (event) => {
for(var a=0;a<20000;a++) {
console.log('window', a)
}
}, { passive: true });
当把passive设为true时，页面滚动起来非常顺滑；要是设为false，滚动就会变得卡顿。不过，需要注意的是，scroll事件并不受这种默认设置的影响。
