本文详解在 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 等）。然而，许多开发者会发现仅在 <VChip> 上绑定 @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 生命周期管理能力，无论用户用鼠标还是键盘操作，都能精准、安全地执行清理逻辑。
