.passive事件修饰符

举个例子：

<template>
  <div class="scroll-container" v-on:scroll="onScroll">
    <!-- 大量内容，使容器可滚动 -->
    <div v-for="i in 100" :key="i">{{ i }}</div>
  </div>
</template>

<script>
export default {
  methods: {
    onScroll(event) {
      // 模拟耗时操作
      for (let i = 0; i < 1000000; i++) {
        // 空循环，模拟计算密集型操作
      }
      console.log('滚动位置:', event.target.scrollTop);
    }
  }
}
</script>

没有 .passive 时

• 当你快速滚动页面时，浏览器必须等待 onScroll 函数中的循环执行完毕
• 这会导致滚动卡顿，感觉像 "粘手" 一样不流畅
• 用户体验：滚动时感觉页面在 "挣扎"，不够顺滑

添加 .passive 修饰符后

• 现在，当你滚动页面时，浏览器会立即响应用户的滚动操作
• 即使 onScroll 函数中有耗时操作，滚动也会保持流畅
• 用户体验：滚动感觉非常顺滑，几乎没有延迟