VuetifyChip关闭事件处理指南

本文深入剖析了在 Vuetify 的 `VAutocomplete` 配合 `closable-chips` 使用场景下，如何可靠、统一地捕获 Chip 被关闭的完整事件流——不仅涵盖鼠标点击 × 图标，更关键的是完美支持 Backspace、Shift+Backspace、箭头导航后删除等所有键盘操作，彻底解决开发者常遇的 `@click:close` 失效、`@vnode-before-unmount` 作用域丢失、响应式数据读取为空等顽疾；核心方案是监听 `@update:modelValue` 并通过新旧值比对精准识别被移除项，确保清理逻辑（如更新选中 Set、同步状态、触发副作用）在上下文完整、响应式有效、执行时机准确的前提下稳定运行，让你的多选组件真正具备生产级健壮性与用户体验一致性。

本文详解在 Vuetify VAutocomplete + closable-chips 场景下，如何统一捕获 Chip 被关闭的事件——不仅支持鼠标点击 ×，还兼容键盘（Backspace/Arrow+Backspace）等原生关闭行为，解决 @click:close 失效、vnode-before-unmount 作用域丢失等常见陷阱。

本文详解在 Vuetify `VAutocomplete` + `closable-chips` 场景下，如何统一捕获 Chip 被关闭的事件——不仅支持鼠标点击 ×，还兼容键盘（Backspace/Arrow+Backspace）等原生关闭行为，解决 `@click:close` 失效、`vnode-before-unmount` 作用域丢失等常见陷阱。

在使用 Vuetify 的 VAutocomplete 组件实现多选用户选择器（如 UserPicker）时，一个高频需求是：当用户通过 点击 Chip 上的关闭按钮（×） 或 聚焦输入框后用 Backspace 键删除已选项 时，都能准确触发清理逻辑（如从 select 列表中移除用户、更新选中状态 Set 等）。然而，许多开发者会发现仅在 上绑定 @click:close="removeUser" 并不能覆盖所有关闭场景——尤其是键盘操作时事件不触发，或改用 @vnode-before-unmount 后因组件卸载导致响应式引用（如 select.value）为空，逻辑失效。

根本原因在于：Vuetify 的 closable-chips 模式下，Chip 的关闭行为由父组件 VAutocomplete 统一管理。当用户通过键盘（如 Backspace）删除 Chip 时，Vuetify 并不会派发 @click:close 事件，而是直接操作内部模型并触发 update:modelValue；而 @vnode-before-unmount 属于低层生命周期钩子，执行时 Vue 响应式系统可能已部分解绑，导致 ref 值不可读。

✅ 正确解法：监听 VAutocomplete 的 @update:modelValue 事件，并比对新旧值差异，识别被移除的项。

以下是优化后的核心代码（基于你的原始结构精简重构）：

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { useServerRequestsStore } from '@/stores/server-requests'

interface UserPreview {
  firstName: string
  lastName: string
  username: string
  avatar: string
}

const input = ref()
const items = ref<UserPreview[]>([])
const select = ref<UserPreview[]>([]) // v-model 绑定目标
const selectSet = ref<Set<string>>(new Set())
const search = ref('')

const serverRequests = useServerRequestsStore()

// 初始化 selectSet（确保与 select 同步）
watch(select, (newVal) => {
  selectSet.value = new Set(newVal.map(u => u.username))
}, { immediate: true })

function addUser(userItem: UserPreview) {
  if (selectSet.value.has(userItem.username)) return
  select.value = [...select.value, userItem]
  selectSet.value.add(userItem.username)
  items.value = []
  search.value = ''
  input.value?.focus()
}

// ✅ 关键：监听 modelValue 变更，识别被移除项
function onModelValueUpdate(newVal: UserPreview[]) {
  const oldVal = select.value
  // 找出从 oldVal 中存在、但 newVal 中缺失的项（即被关闭/删除的 Chip）
  const removed = oldVal.filter(old => !newVal.some(newItem => newItem.username === old.username))
  removed.forEach(user => {
    selectSet.value.delete(user.username)
    console.log('Chip closed (keyboard or click):', user.username)
    // ✅ 此处可安全执行清理逻辑，select.value 已更新，作用域完整
  })
  select.value = newVal // 显式同步（虽 v-model 已处理，但显式赋值更清晰）
}

// 搜索逻辑（保持不变）
watch(search, async (val) => {
  if (!val?.trim()) {
    items.value = []
    return
  }
  try {
    const users = await serverRequests.getUserByUsername(val, false)
    items.value = users
      .filter(user => !selectSet.value.has(user.userInfo.username))
      .map(user => ({
        firstName: user.userInfo.firstName,
        lastName: user.userInfo.lastName,
        username: user.userInfo.username,
        title: user.userInfo.username,
        avatar: user.userInfo.profilePicture,
      }))
  } catch (err) {
    items.value = []
  }
})
</script>

<template>
  <VAutocomplete
    ref="input"
    v-model="select"
    v-model:search="search"
    :items="items"
    class="mx-4"
    density="compact"
    hide-no-data
    hide-details
    label="Seleziona destinatari"
    style="max-width: 300px"
    chips
    closable-chips
    multiple
    @update:modelValue="onModelValueUpdate" <!-- ? 核心监听点 -->
  >
    <template v-slot:item="{ item }">
      <VListItem class="text-center" @click="addUser(item.raw)">
        <VAvatar size="40px" color="black" variant="outlined">
          <VImg :src="item.raw.avatar" alt="profile avatar" />
        </VAvatar>
        <VListItemTitle>{{ item.raw.firstName }} {{ item.raw.lastName }}</VListItemTitle>
        <VListItemSubtitle>{{ item.raw.username }}</VListItemSubtitle>
      </VListItem>
    </template>
    <template v-slot:chip="{ item }">
      <!-- ✅ 仍保留 @click:close 用于鼠标交互（语义清晰） -->
      <VChip
        @click:close.stop="onModelValueUpdate(select.filter(u => u.username !== item.raw.username))"
        :text="item.raw.username"
      />
    </template>
  </VAutocomplete>
</template>

? 关键要点总结：

• 不要依赖 @click:close 单一事件：它只响应鼠标点击 ×，无法捕获 Backspace、Shift+Backspace、箭头导航后删除等键盘行为。
• 首选 @update:modelValue：这是 Vuetify 官方推荐的响应式模型变更监听方式，100% 覆盖所有关闭路径（UI 点击、键盘操作、程序化修改），且保证上下文完整。
• 避免 @vnode-before-unmount：该钩子在虚拟节点销毁前触发，此时组件实例可能已进入非响应式状态，ref 值不可靠，属于反模式。
• @click:close.stop 仍可保留：作为鼠标交互的快捷入口，但其回调应调用与 @update:modelValue 相同的业务逻辑（如上例中调用 onModelValueUpdate），确保逻辑收敛。
• 注意 selectSet 同步：使用 watch(select, ..., { immediate: true }) 确保初始化时 Set 与数组一致，避免搜索过滤失效。

通过此方案，你的 UserPicker 将真正具备健壮的 Chip 生命周期管理能力，无论用户用鼠标还是键盘操作，都能精准、安全地执行清理逻辑。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《VuetifyChip关闭事件处理指南》文章吧，也可关注golang学习网公众号了解相关技术文章。