深入理解 Vue 中事件侦听器的优化，包括 `passive` 监听器、事件委托和事件解绑的最佳实践。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！我是今天的主讲人，一个在代码堆里摸爬滚打多年的老码农。今天咱们不聊高大上的架构，也不谈玄之又玄的算法，就来聊聊Vue里那些看似不起眼，但实则能提升应用性能的小技巧——事件侦听器的优化。说白了，就是让你的Vue应用跑得更快，更流畅，让你少掉头发。

咱们今天就围绕passive监听器、事件委托和事件解绑这三个方面，深入扒一扒Vue事件侦听器的优化姿势。保证通俗易懂，代码管够，让你听完就能上手用。

开场白：别让事件侦听器拖你后腿

首先，咱们得明确一个概念：事件侦听器这玩意，看似简单，但如果用不好，绝对是性能杀手。你想啊，用户在你的页面上滑动一下，你注册了一堆事件侦听器，每个都在那儿疯狂计算、渲染，那页面能不卡吗？

所以，优化事件侦听器，就是优化用户体验，提升应用性能的关键一步。

第一章：passive监听器：解放你的滚动条

先来说说passive监听器。这玩意儿可能有些同学不太熟悉，但它在移动端性能优化上，绝对是神器级别的存在。

什么是passive监听器？

简单来说，passive监听器是一种告诉浏览器，你的事件处理函数不会调用preventDefault()的方法的声明。也就是说，你明确告诉浏览器，这个事件处理函数不会阻止默认行为。

为什么要用passive监听器？

重点来了！在滚动事件（scroll、touchmove等）中，浏览器需要等待事件处理函数执行完毕，才能知道是否需要阻止默认的滚动行为。如果没有passive声明，浏览器就只能阻塞滚动操作，等待JS执行完毕。这就会造成滚动卡顿。

而有了passive声明，浏览器就可以直接执行滚动操作，无需等待JS执行，从而大大提升滚动流畅度。

Vue中如何使用passive监听器？

在Vue中，可以通过事件修饰符 .passive 来使用passive监听器。

<template>
  <div @scroll.passive="handleScroll">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll(event) {
      // 处理滚动事件，但不能调用 event.preventDefault()
      console.log('滚动了！');
    }
  }
}
</script>

或者，更细致的，可以针对 addEventListener使用，Vue的底层也是调用的addEventListener。

// 假设你直接操作原生DOM
const element = document.getElementById('myElement');

element.addEventListener('scroll', (event) => {
  // 处理滚动事件
  console.log('滚动了！');
}, { passive: true }); // 关键：添加 passive: true 选项

注意事项

使用passive监听器后，你的事件处理函数中就不能调用event.preventDefault()了。如果调用了，浏览器会忽略你的调用，并且在控制台抛出一个警告。

总结

特性	`passive` 监听器	常规监听器
滚动性能	提升滚动流畅度	可能造成卡顿
`preventDefault()`	禁止调用	可以调用

第二章：事件委托：四两拨千斤的艺术

接下来，咱们聊聊事件委托。这玩意儿的核心思想就是：不要给每个元素都绑定事件监听器，而是把事件监听器绑定到它们的父元素上，利用事件冒泡的机制来处理事件。

什么是事件委托？

想象一下，你家有十个熊孩子，每个孩子都想吃糖。如果你给每个孩子都发一颗糖，那你就得准备十颗糖。但如果你只给他们的老爸（父元素）一颗糖，让他负责分发，那你就只需要准备一颗糖。这就是事件委托的思想。

为什么要用事件委托？

减少内存占用： 只绑定一个事件监听器，而不是给每个子元素都绑定一个，大大减少了内存占用。
提高性能： 减少了事件监听器的数量，浏览器需要处理的事件就少了，性能自然就提升了。
动态添加的元素也能处理： 即使你动态地添加了新的子元素，它们也能自动享受到事件监听器的待遇，无需重新绑定。

Vue中如何使用事件委托？

<template>
  <ul @click="handleClick">
    <li v-for="item in items" :key="item.id" :data-id="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橘子' }
      ]
    }
  },
  methods: {
    handleClick(event) {
      // 获取触发事件的元素
      const target = event.target;

      // 检查是否点击的是 li 元素
      if (target.tagName === 'LI') {
        // 获取 li 元素的 data-id 属性
        const itemId = target.dataset.id;

        // 处理点击事件
        console.log('点击了商品，ID：', itemId);
      }
    }
  }
}
</script>

在这个例子中，我们将点击事件监听器绑定到了 ul 元素上。当点击 li 元素时，事件会冒泡到 ul 元素，然后执行 handleClick 方法。在 handleClick 方法中，我们通过 event.target 获取触发事件的元素，并判断是否是 li 元素，然后根据 data-id 属性来处理点击事件。

注意事项

事件冒泡： 事件委托依赖于事件冒泡的机制。如果事件被阻止冒泡，那么事件委托就无法生效。
事件目标： 需要仔细判断 event.target 是否是目标元素，避免误操作。
this 指向： 在事件处理函数中，this 指向的是绑定事件的元素（父元素），而不是触发事件的元素（子元素）。

总结

特性	事件委托	直接绑定
内存占用	减少	增加
性能	提升	下降
动态元素	支持	不支持

第三章：事件解绑：有借有还，再用不难

最后，咱们来说说事件解绑。这玩意儿就像是借钱，借了就要还，不然早晚要出事。在Vue中，如果你在组件销毁后，没有及时解绑事件监听器，就会造成内存泄漏，导致应用性能下降。

为什么要解绑事件监听器？

当组件销毁时，如果事件监听器仍然存在，那么事件处理函数就会继续执行，即使组件已经不存在了。这会导致以下问题：

内存泄漏： 事件监听器会持有组件的引用，导致组件无法被垃圾回收，造成内存泄漏。
意外的副作用： 事件处理函数可能会修改已经销毁的组件的状态，导致不可预测的错误。
重复的监听器： 如果组件频繁创建和销毁，可能会反复注册同一个事件监听器，导致事件处理函数被多次调用。

Vue中如何解绑事件监听器？

使用 v-on 绑定的事件： Vue会自动在组件销毁时解绑使用 v-on 绑定的事件监听器。所以，你不用手动解绑。
使用 addEventListener 绑定的事件： 需要手动解绑。可以在 beforeDestroy 或 destroyed 生命周期钩子中解绑。

<template>
  <div>
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    // 绑定事件监听器
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 解绑事件监听器
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 处理窗口大小改变事件
      console.log('窗口大小改变了！');
    }
  }
}
</script>

对于第三方库或者原生DOM事件，如果你的vue组件使用了第三方库，或者直接操作了原生DOM，那么需要确保在组件销毁时，将这些事件监听器也解绑。

<template>
  <div ref="myDiv">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    // 假设使用了某个第三方库的事件
    this.thirdPartyHandler = () => { console.log('第三方库事件触发') };
    window.addEventListener('thirdPartyEvent', this.thirdPartyHandler);

    // 直接操作DOM绑定事件
    this.$refs.myDiv.addEventListener('click', this.domClickHandler);
  },
  beforeDestroy() {
    // 解绑第三方库事件
    window.removeEventListener('thirdPartyEvent', this.thirdPartyHandler);

    // 解绑原生DOM事件
    this.$refs.myDiv.removeEventListener('click', this.domClickHandler);
  },
  methods: {
    domClickHandler() {
      console.log('DOM click 事件触发');
    }
  }
}
</script>

注意事项

this 指向： 在解绑事件监听器时，需要确保 this 指向的是正确的组件实例。可以使用箭头函数来避免 this 指向问题。
事件处理函数： 解绑事件监听器时，需要使用与绑定时相同的事件处理函数。如果使用了匿名函数，就无法解绑。
addEventListener返回值： 有些库或框架的addEventListener方法可能返回一个标识符或对象，用于后续的removeListener。请确保按照库或框架的要求正确解绑。

总结

特性	`v-on` 绑定的事件	`addEventListener` 绑定的事件
解绑方式	自动解绑	手动解绑
生命周期钩子	无需手动解绑	`beforeDestroy` 或 `destroyed`

第四章：最佳实践：让你的代码更优雅

最后，咱们来总结一下 Vue 中事件侦听器的最佳实践：

优先使用 v-on 绑定事件： Vue 会自动解绑使用 v-on 绑定的事件监听器，避免内存泄漏。
合理使用事件委托： 对于大量相似的子元素，使用事件委托可以减少内存占用，提高性能。
及时解绑事件监听器： 对于使用 addEventListener 绑定的事件监听器，在组件销毁时一定要手动解绑。
使用 passive 监听器优化滚动事件： 在移动端应用中，使用 passive 监听器可以提升滚动流畅度。
避免在事件处理函数中执行耗时操作： 如果需要在事件处理函数中执行耗时操作，可以使用 setTimeout 或 requestAnimationFrame 将操作放到下一个事件循环中执行，避免阻塞UI线程。
节流（Throttling）和防抖（Debouncing）：对于一些高频触发的事件（如resize, scroll, keypress），使用节流和防抖技术可以限制事件处理函数的执行频率，从而优化性能。

总结：精益求精，才能成就卓越

好了，今天的分享就到这里。希望大家通过今天的学习，能够更加深入地理解 Vue 中事件侦听器的优化技巧，并在实际项目中灵活运用，让你的 Vue 应用跑得更快，更流畅，让你少掉头发！记住，优化无止境，精益求精，才能成就卓越！

感谢各位观众老爷的耐心聆听！下次再见！

发表回复 取消回复

发表回复取消回复