.passive的用法

`.passive` 是一个事件监听器的选项，它被用于告诉浏览器你不想在监听函数中调用 `preventDefault()`。使用 `.passive` 选项的好处是，它可以让浏览器在处理事件前知道你是否打算调用 `preventDefault()`，这在某些情况下可以显著提高滚动性能。

这里是如何在Vue中使用 `.passive` 的一个例子：

<template>
  <div @scroll.passive="onScroll">
    <!-- Your content here -->
  </div>
</template>

<script>
export default {
  methods: {
    onScroll(event) {
      // 你的滚动处理代码
      console.log('滚动事件被触发，但不会调用 preventDefault()');
    }
  }
}
</script>

在上面的例子中，我们监听了 `scroll` 事件，并添加了 `.passive` 修饰符。这意味着在 `onScroll` 方法中，你不会尝试阻止滚动行为的默认行为。

使用 `.passive` 修饰符通常与触摸事件和滚动事件一起使用，以告诉浏览器用户代理可以忽略调用 `preventDefault()`，这样可以提高滚动性能，尤其是当处理大量的滚动和触摸事件监听器时。

注意：在旧版本的 Vue.js 中，你可能需要使用原生的 `addEventListener` 方法来添加 `.passive` 选项。例如：

export default {
  mounted() {
    this.$el.addEventListener('touchmove', this.handleTouchMove, {
      passive: true
    });
  },
  methods: {
    handleTouchMove(event) {
      // 事件处理逻辑
    }
  }
}