事件处理优化

合理的事件处理策略可以显著提升应用性能，避免高频事件导致的性能问题。

事件修饰符

<!-- 阻止事件冒泡 -->
<button @click.stop="handleClick">按钮</button>

<!-- 阻止默认行为 -->
<form @submit.prevent="onSubmit">

<!-- 只触发一次 -->
<button @click.once="handleClick">一次性按钮</button>

<!-- 捕获模式监听
<div @click.capture="handleCapture">

<!-- 仅当 event.target 是当前元素时触发 -->
<div @click.self="handleSelf">

修饰符可以减少不必要的 JavaScript 判断逻辑。

事件委托

<!-- 不推荐：每个子元素都绑定事件 -->
<ul>
  <li v-for="item in items" :key="item.id" @click="handleClick(item)">
    {{ item.name }}
  </li>
</ul>

<!-- 推荐：在父元素上统一处理 -->
<ul @click="handleClick($event)">
  <li v-for="item in items" :key="item.id" :data-id="item.id">
    {{ item.name }}
  </li>
</ul>

<script setup>
function handleClick(event) {
  const li = event.target.closest('li')
  if (!li) return
  const id = li.dataset.id
  // 处理逻辑
}
</script>

防抖与节流

import { ref } from 'vue'

// 防抖：适合搜索、resize
function debounce(fn, delay) {
  let timer = null
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

// 节流：适合滚动、滑动
function throttle(fn, interval) {
  let last = 0
  return function (...args) {
    const now = Date.now()
    if (now - last >= interval) {
      last = now
      fn.apply(this, args)
    }
  }
}

// 使用
const debouncedSearch = debounce((query) => {
  searchResults.value = fetchSearch(query)
}, 300)

避免内联函数创建

<!-- 不推荐：每次渲染都创建新函数 -->
<button @click="() => handleClick(item.id)">点击</button>

<!-- 推荐：传递参数 -->
<button @click="handleClick(item.id)">点击</button>

passive 修饰符

<!-- 告诉浏览器不会调用 preventDefault，优化滚动性能 -->
<div @scroll.passive="onScroll">

passive 修饰符可以让滚动更流畅，因为浏览器不需要等待事件处理结果。

要点总结

• 使用事件修饰符简化常见处理逻辑
• 列表项点击使用事件委托减少绑定数量
• 搜索使用防抖，滚动/滑动使用节流
• 避免在模板中创建内联箭头函数
• 滚动事件使用 passive 修饰符提升性能