面试题：Vue中组件事件冒泡与捕获机制的原理及优化策略

Vue 中组件事件冒泡与捕获机制的底层原理

事件绑定原理

在 Vue 中，组件通过 $on 方法监听自定义事件，通过 $emit 方法触发自定义事件。例如：

// 子组件
export default {
  methods: {
    handleClick() {
      this.$emit('custom - event')
    }
  }
}
// 父组件
<template>
  <ChildComponent @custom - event="handleCustomEvent"/>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent() {
      console.log('父组件监听到自定义事件')
    }
  }
}
</script>

这其实是基于 JavaScript 的发布 - 订阅模式。Vue 实例维护了一个事件中心，$on 是订阅事件，$emit 是发布事件。

冒泡机制
- 组件的冒泡是指当子组件触发一个事件时，父组件（如果父组件监听了该事件）可以接收到这个事件，并且沿着组件树向上传播，就像 DOM 事件冒泡一样。例如上述代码中，子组件 ChildComponent 触发 custom - event，父组件监听到并执行 handleCustomEvent 方法。
- 其原理是 Vue 在组件实例内部维护了一个事件队列，当 $emit 触发事件时，会检查父组件是否监听了该事件，如果监听了，则执行父组件的事件处理函数。然后继续向上查找父组件的父组件，直到没有父组件为止。
捕获机制
- Vue 本身没有直接提供像原生 DOM 那样完整的事件捕获机制，但可以通过一些技巧模拟。例如，在父组件中使用 @click.native.capture 来捕获原生 DOM 点击事件，然后通过传递数据等方式模拟组件捕获行为。不过这和原生 DOM 的捕获机制不同，原生 DOM 捕获是从根节点到目标节点的过程，而 Vue 这种模拟是基于组件结构的。

与原生 DOM 事件冒泡和捕获机制的联系与区别

联系
- 冒泡的概念类似，都是从子元素向父元素传播事件。在 DOM 中，点击子元素，事件会从子元素冒泡到父元素，在 Vue 组件中，子组件触发事件，也可以冒泡到父组件。
- 都基于事件传播的模型，无论是 DOM 还是 Vue 组件，都需要在特定元素（组件）上监听事件并做出响应。
区别
- 事件类型：原生 DOM 事件是浏览器标准事件，如 click、mousedown 等，而 Vue 组件事件主要是自定义事件，虽然也可以绑定原生 DOM 事件，但本质上是对原生事件的封装。
- 传播范围：原生 DOM 事件在整个 DOM 树中传播，而 Vue 组件事件只在组件树中传播。例如，一个 Vue 组件内部的 DOM 元素触发的原生事件，不会传播到其他 Vue 组件中，除非通过特定的方式（如 @click.native）进行处理。
- 实现原理：原生 DOM 事件冒泡和捕获是由浏览器内核实现的，而 Vue 组件的事件冒泡是基于 Vue 自身的发布 - 订阅模式在组件实例间实现的。

复杂组件结构下事件处理性能问题优化策略

策略一：事件委托

实现方式：

在父组件上监听事件，而不是在每个子组件上监听。例如，有一个列表组件，列表项是子组件，点击列表项触发事件。

<!-- 父组件 -->
<template>
  <div @click="handleItemClick">
    <ListItem v - for="(item, index) in list" :key="index" :item="item"/>
  </div>
</template>
<script>
import ListItem from './ListItem.vue'
export default {
  components: { ListItem },
  data() {
    return {
      list: [
        { id: 1, name: 'item1' },
        { id: 2, name: 'item2' }
      ]
    }
  },
  methods: {
    handleItemClick(event) {
      const target = event.target
      // 判断点击的是否是列表项子组件的元素，然后处理
      if (target.classList.contains('list - item - class')) {
        const itemId = target.dataset.itemId
        console.log(`点击了列表项 ${itemId}`)
      }
    }
  }
}
</script>

在子组件 ListItem 模板中，给列表项元素添加 data - item - id 等属性，方便父组件获取点击的具体信息。

适用场景：适用于有大量相似子组件，且子组件触发的事件类型相同的场景。比如菜单列表、商品列表等，这样可以减少事件监听器的数量，提高性能。

策略二：节流与防抖
- 节流：
  - 实现方式：使用 lodash 等库提供的 throttle 方法，或者自己实现节流函数。例如：
```
// 自己实现节流函数
function throttle(func, wait) {
  let lastTime = 0
  return function(...args) {
    const now = new Date().getTime()
    if (now - lastTime >= wait) {
      func.apply(this, args)
      lastTime = now
    }
  }
}
export default {
  methods: {
    handleFrequentEvent: throttle(function() {
      console.log('节流处理频繁事件')
    }, 500)
  }
}
```
  - 在组件的模板中，将频繁触发的事件（如 scroll、resize 等）绑定到 handleFrequentEvent 方法。
- 适用场景：适用于那些频繁触发的事件，如窗口滚动、鼠标移动等。通过节流，限制事件触发的频率，避免短时间内大量执行事件处理函数，从而提高性能。
- 防抖：
  - 实现方式：同样可以使用 lodash 的 debounce 方法或自己实现。例如：
```
// 自己实现防抖函数
function debounce(func, wait) {
  let timer
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}
export default {
  methods: {
    handleSearch: debounce(function() {
      console.log('防抖处理搜索事件')
    }, 300)
  }
}
```
  - 在搜索框组件中，将 input 事件绑定到 handleSearch 方法，这样用户输入时，不会立即触发搜索，而是在用户停止输入 300ms 后才触发，避免了频繁请求搜索接口。
- 适用场景：适用于用户输入、按钮快速点击等场景，防止短时间内多次触发同一事件，减少不必要的计算和请求，提高性能。

面试题：Vue中组件事件冒泡与捕获机制的原理及优化策略

知识考点

面试题答案

Vue 中组件事件冒泡与捕获机制的底层原理

与原生 DOM 事件冒泡和捕获机制的联系与区别

复杂组件结构下事件处理性能问题优化策略