[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fwG_sv2MVAQxv9VQ9Wfki3L8KVejS80wsDq0WCyTnCaw":3,"$fJU-4tot_gC5fDkujNeoE-cGsdMy5V_KcdUXLuAnTFgw":15,"$fc2e1jCTQ4HO0jdQq6_H4azqiueOrPqV7KFbRYtlWcSc":423},{"slug":4,"title":5,"description":6,"content":7,"content_html":8,"pub_date":9,"tags":10,"draft":14},"element-plus-popover-hide","手动关闭多个 el-popover（不用 v-model:visible）","通过 ref + Reflect.get 调用 hide() 方法手动关闭 Element Plus Popover，解释 Vue3 Proxy 导致无法直接调用实例方法的原因。","## 问题背景\n\n列表里每一行都有一个 `el-popover`，点击行内按钮弹出，点击确认\u002F取消后关闭。\n\n最直觉的做法是用 `v-model:visible` 绑定一个布尔值数组：\n\n```vue\n\u003Cel-popover\n  v-for=\"(item, index) in list\"\n  :key=\"item.id\"\n  v-model:visible=\"popoverVisible[index]\"\n  trigger=\"click\"\n\u002F>\n```\n\n这样每一行都需要一个独立的响应式变量，而且打开一个 popover 时还要手动关闭其他的，逻辑变复杂。\n\n更麻烦的是，有时候 popover 是在子组件里渲染的，`visible` 的状态要通过 props\u002Femit 传来传去，不值得。\n\n**想要的效果**：直接拿到组件实例，调用它的 `hide()` 方法，不维护任何 visible 状态。\n\n---\n\n## 方案一：单个 popover，ref + hide()\n\n先看最简单的情况——只有一个 popover。\n\n```vue\n\u003Ctemplate>\n  \u003Cel-popover\n    ref=\"popoverRef\"\n    :width=\"260\"\n    trigger=\"click\"\n    popper-class=\"modify-popover\"\n  >\n    \u003Ctemplate #default>\n      \u003Cp>确认要修改吗？\u003C\u002Fp>\n      \u003Cel-button size=\"small\" @click=\"handleConfirm\">确认\u003C\u002Fel-button>\n      \u003Cel-button size=\"small\" @click=\"closePopover\">取消\u003C\u002Fel-button>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate #reference>\n      \u003Cel-button>修改\u003C\u002Fel-button>\n    \u003C\u002Ftemplate>\n  \u003C\u002Fel-popover>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ElPopover } from 'element-plus'\n\nconst popoverRef = ref\u003CInstanceType\u003Ctypeof ElPopover>>()\n\nfunction closePopover() {\n  \u002F\u002F ❌ 直接调用报错：popoverRef.value.hide is not a function\n  \u002F\u002F popoverRef.value?.hide()\n\n  \u002F\u002F ✅ 正确写法：通过 Reflect.get 取出方法再调用\n  const instance = popoverRef.value\n  if (instance) {\n    Reflect.get(instance, 'hide').call(instance)\n  }\n}\n\nfunction handleConfirm() {\n  \u002F\u002F 做业务逻辑...\n  closePopover()\n}\n\u003C\u002Fscript>\n```\n\n---\n\n## 为什么不能直接调 .hide()？\n\n这是 Vue3 响应式系统的副作用。\n\nVue3 用 `Proxy` 实现响应式，当你把组件实例存进 `ref()` 时，它被套了一层 Proxy：\n\n```\nref.value → Proxy → 真实组件实例\n```\n\nProxy 会拦截属性访问。Element Plus 的 `hide` 方法定义在组件暴露的接口上，而通过 Proxy 访问时，这个方法并不在 Proxy 的拦截白名单里（或者方法内部的 `this` 指向出现了问题）。\n\n直接 `popoverRef.value.hide()` 有时候确实能访问到函数，但调用时 `this` 已经不是原始实例了，导致内部访问 `this.xxx` 失败。\n\n`Reflect.get(target, key)` 的作用是**绕开 Proxy 的拦截，直接从目标对象上取属性**，然后用 `.call(instance)` 把 `this` 绑定回真实实例。\n\n```ts\n\u002F\u002F 等价于：在原始对象上取 hide，再以 instance 为 this 调用它\nconst hideFn = Reflect.get(instance, 'hide')\nhideFn.call(instance)\n```\n\n---\n\n## 方案二：多个 popover，ref 数组\n\n列表场景下，需要存多个 popover 实例。\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv v-for=\"(item, index) in list\" :key=\"item.id\" class=\"list-item\">\n    \u003Cspan>{{ item.name }}\u003C\u002Fspan>\n\n    \u003Cel-popover\n      :ref=\"(el) => setPopoverRef(el, index)\"\n      :width=\"260\"\n      trigger=\"click\"\n    >\n      \u003Ctemplate #default>\n        \u003Cp>确认修改「{{ item.name }}」？\u003C\u002Fp>\n        \u003Cdiv class=\"popover-actions\">\n          \u003Cel-button size=\"small\" type=\"primary\" @click=\"handleConfirm(index)\">\n            确认\n          \u003C\u002Fel-button>\n          \u003Cel-button size=\"small\" @click=\"closePopover(index)\">取消\u003C\u002Fel-button>\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n      \u003Ctemplate #reference>\n        \u003Cel-button size=\"small\">修改\u003C\u002Fel-button>\n      \u003C\u002Ftemplate>\n    \u003C\u002Fel-popover>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ElPopover } from 'element-plus'\n\ninterface ListItem {\n  id: number\n  name: string\n}\n\nconst list = ref\u003CListItem[]>([\n  { id: 1, name: '项目 A' },\n  { id: 2, name: '项目 B' },\n  { id: 3, name: '项目 C' },\n])\n\n\u002F\u002F 用对象（而不是数组）存 ref，避免列表增删时索引错位\nconst popoverRefs = ref\u003CRecord\u003Cnumber, InstanceType\u003Ctypeof ElPopover>>>({})\n\nfunction setPopoverRef(el: unknown, index: number) {\n  if (el) {\n    popoverRefs.value[index] = el as InstanceType\u003Ctypeof ElPopover>\n  } else {\n    \u002F\u002F el 为 null 时说明组件已卸载，清理引用\n    delete popoverRefs.value[index]\n  }\n}\n\nfunction closePopover(index: number) {\n  const instance = popoverRefs.value[index]\n  if (!instance) return\n  Reflect.get(instance, 'hide').call(instance)\n}\n\nfunction handleConfirm(index: number) {\n  const item = list.value[index]\n  console.log('确认修改：', item.name)\n  \u002F\u002F 业务逻辑...\n  closePopover(index)\n}\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.list-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 0;\n}\n\n.popover-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n  margin-top: 8px;\n}\n\u003C\u002Fstyle>\n```\n\n### 为什么用对象而不是数组\n\n```ts\n\u002F\u002F ❌ 用数组的问题：列表删除第 1 项后，索引全部错位\nconst popoverRefs = ref\u003CInstanceType\u003Ctypeof ElPopover>[]>([])\n\n\u002F\u002F ✅ 用对象存，key 是稳定的 index（或更好：item.id）\nconst popoverRefs = ref\u003CRecord\u003Cnumber, InstanceType\u003Ctypeof ElPopover>>>({})\n```\n\n如果列表项有稳定的 `id`，把 key 换成 `item.id` 更可靠：\n\n```ts\nfunction setPopoverRef(el: unknown, id: number) {\n  if (el) {\n    popoverRefs.value[id] = el as InstanceType\u003Ctypeof ElPopover>\n  } else {\n    delete popoverRefs.value[id]\n  }\n}\n```\n\n---\n\n## 完整示例：带关闭其他 popover 的版本\n\n点击某一行时，先关闭所有已打开的 popover，再让当前的弹出（避免多个同时展示）：\n\n```vue\n\u003Ctemplate>\n  \u003Cel-table :data=\"tableData\">\n    \u003Cel-table-column prop=\"name\" label=\"名称\" \u002F>\n    \u003Cel-table-column label=\"操作\" width=\"120\">\n      \u003Ctemplate #default=\"{ row, $index }\">\n        \u003Cel-popover\n          :ref=\"(el) => setPopoverRef(el, row.id)\"\n          placement=\"left\"\n          :width=\"200\"\n          trigger=\"click\"\n          @show=\"closeOthers(row.id)\"\n        >\n          \u003Ctemplate #default>\n            \u003Cel-button\n              type=\"danger\"\n              size=\"small\"\n              @click=\"handleDelete(row, $index)\"\n            >\n              确认删除\n            \u003C\u002Fel-button>\n          \u003C\u002Ftemplate>\n          \u003Ctemplate #reference>\n            \u003Cel-button type=\"text\" size=\"small\">删除\u003C\u002Fel-button>\n          \u003C\u002Ftemplate>\n        \u003C\u002Fel-popover>\n      \u003C\u002Ftemplate>\n    \u003C\u002Fel-table-column>\n  \u003C\u002Fel-table>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ElPopover, ElMessage } from 'element-plus'\n\nconst tableData = ref([\n  { id: 1, name: '记录 A' },\n  { id: 2, name: '记录 B' },\n  { id: 3, name: '记录 C' },\n])\n\nconst popoverRefs = ref\u003CRecord\u003Cnumber, InstanceType\u003Ctypeof ElPopover>>>({})\n\nfunction setPopoverRef(el: unknown, id: number) {\n  if (el) {\n    popoverRefs.value[id] = el as InstanceType\u003Ctypeof ElPopover>\n  } else {\n    delete popoverRefs.value[id]\n  }\n}\n\n\u002F\u002F 关闭除 excludeId 之外的所有 popover\nfunction closeOthers(excludeId: number) {\n  for (const [id, instance] of Object.entries(popoverRefs.value)) {\n    if (Number(id) !== excludeId && instance) {\n      Reflect.get(instance, 'hide').call(instance)\n    }\n  }\n}\n\nfunction handleDelete(row: { id: number; name: string }, index: number) {\n  \u002F\u002F 关闭当前 popover\n  Reflect.get(popoverRefs.value[row.id], 'hide').call(popoverRefs.value[row.id])\n  tableData.value.splice(index, 1)\n  ElMessage.success(`已删除：${row.name}`)\n}\n\u003C\u002Fscript>\n```\n\n`@show` 事件在 popover 打开时触发，此时关闭其他的，体验上比较自然。\n\n---\n\n## 小结\n\n| 场景 | 方案 |\n|------|------|\n| 单个 popover，手动关闭 | `ref` + `Reflect.get(instance, 'hide').call(instance)` |\n| 多个 popover，关闭指定一个 | `ref` 对象（key 用 id）+ 同上 |\n| 打开一个时关闭其他 | `@show` 事件里遍历关闭其他实例 |\n\n核心是两点：\n1. 不要维护 `visible` 数组，复杂度不值得。\n2. 直接 `.hide()` 因为 Vue3 Proxy 可能失效，用 `Reflect.get` 绕过去。","\u003Ch2 id=\"问题背景\">问题背景\u003C\u002Fh2>\n\u003Cp>列表里每一行都有一个 \u003Ccode>el-popover\u003C\u002Fcode>，点击行内按钮弹出，点击确认\u002F取消后关闭。\u003C\u002Fp>\n\u003Cp>最直觉的做法是用 \u003Ccode>v-model:visible\u003C\u002Fcode> 绑定一个布尔值数组：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-vue\"><el-popover\n  v-for="(item, index) in list"\n  :key="item.id"\n  v-model:visible="popoverVisible[index]"\n  trigger="click"\n\u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>这样每一行都需要一个独立的响应式变量，而且打开一个 popover 时还要手动关闭其他的，逻辑变复杂。\u003C\u002Fp>\n\u003Cp>更麻烦的是，有时候 popover 是在子组件里渲染的，\u003Ccode>visible\u003C\u002Fcode> 的状态要通过 props\u002Femit 传来传去，不值得。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>想要的效果\u003C\u002Fstrong>：直接拿到组件实例，调用它的 \u003Ccode>hide()\u003C\u002Fcode> 方法，不维护任何 visible 状态。\u003C\u002Fp>\n\u003Chr>\n\u003Ch2 id=\"方案一-单个-popover-ref-hide\">方案一：单个 popover，ref + hide()\u003C\u002Fh2>\n\u003Cp>先看最简单的情况——只有一个 popover。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-vue\"><template>\n  <el-popover\n    ref="popoverRef"\n    :width="260"\n    trigger="click"\n    popper-class="modify-popover"\n  >\n    <template #default>\n      <p>确认要修改吗？<\u002Fp>\n      <el-button size="small" @click="handleConfirm">确认<\u002Fel-button>\n      <el-button size="small" @click="closePopover">取消<\u002Fel-button>\n    <\u002Ftemplate>\n    <template #reference>\n      <el-button>修改<\u002Fel-button>\n    <\u002Ftemplate>\n  <\u002Fel-popover>\n<\u002Ftemplate>\n\n<script setup lang="ts">\nimport { ref } from 'vue'\nimport { ElPopover } from 'element-plus'\n\nconst popoverRef = ref<InstanceType<typeof ElPopover>>()\n\nfunction closePopover() {\n  \u002F\u002F ❌ 直接调用报错：popoverRef.value.hide is not a function\n  \u002F\u002F popoverRef.value?.hide()\n\n  \u002F\u002F ✅ 正确写法：通过 Reflect.get 取出方法再调用\n  const instance = popoverRef.value\n  if (instance) {\n    Reflect.get(instance, 'hide').call(instance)\n  }\n}\n\nfunction handleConfirm() {\n  \u002F\u002F 做业务逻辑...\n  closePopover()\n}\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Chr>\n\u003Ch2 id=\"为什么不能直接调-hide\">为什么不能直接调 .hide()？\u003C\u002Fh2>\n\u003Cp>这是 Vue3 响应式系统的副作用。\u003C\u002Fp>\n\u003Cp>Vue3 用 \u003Ccode>Proxy\u003C\u002Fcode> 实现响应式，当你把组件实例存进 \u003Ccode>ref()\u003C\u002Fcode> 时，它被套了一层 Proxy：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>ref.value → Proxy → 真实组件实例\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Proxy 会拦截属性访问。Element Plus 的 \u003Ccode>hide\u003C\u002Fcode> 方法定义在组件暴露的接口上，而通过 Proxy 访问时，这个方法并不在 Proxy 的拦截白名单里（或者方法内部的 \u003Ccode>this\u003C\u002Fcode> 指向出现了问题）。\u003C\u002Fp>\n\u003Cp>直接 \u003Ccode>popoverRef.value.hide()\u003C\u002Fcode> 有时候确实能访问到函数，但调用时 \u003Ccode>this\u003C\u002Fcode> 已经不是原始实例了，导致内部访问 \u003Ccode>this.xxx\u003C\u002Fcode> 失败。\u003C\u002Fp>\n\u003Cp>\u003Ccode>Reflect.get(target, key)\u003C\u002Fcode> 的作用是\u003Cstrong>绕开 Proxy 的拦截，直接从目标对象上取属性\u003C\u002Fstrong>，然后用 \u003Ccode>.call(instance)\u003C\u002Fcode> 把 \u003Ccode>this\u003C\u002Fcode> 绑定回真实实例。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-ts\">\u002F\u002F 等价于：在原始对象上取 hide，再以 instance 为 this 调用它\nconst hideFn = Reflect.get(instance, 'hide')\nhideFn.call(instance)\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Chr>\n\u003Ch2 id=\"方案二-多个-popover-ref-数组\">方案二：多个 popover，ref 数组\u003C\u002Fh2>\n\u003Cp>列表场景下，需要存多个 popover 实例。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-vue\"><template>\n  <div v-for="(item, index) in list" :key="item.id" class="list-item">\n    <span>{{ item.name }}<\u002Fspan>\n\n    <el-popover\n      :ref="(el) => setPopoverRef(el, index)"\n      :width="260"\n      trigger="click"\n    >\n      <template #default>\n        <p>确认修改「{{ item.name }}」？<\u002Fp>\n        <div class="popover-actions">\n          <el-button size="small" type="primary" @click="handleConfirm(index)">\n            确认\n          <\u002Fel-button>\n          <el-button size="small" @click="closePopover(index)">取消<\u002Fel-button>\n        <\u002Fdiv>\n      <\u002Ftemplate>\n      <template #reference>\n        <el-button size="small">修改<\u002Fel-button>\n      <\u002Ftemplate>\n    <\u002Fel-popover>\n  <\u002Fdiv>\n<\u002Ftemplate>\n\n<script setup lang="ts">\nimport { ref } from 'vue'\nimport { ElPopover } from 'element-plus'\n\ninterface ListItem {\n  id: number\n  name: string\n}\n\nconst list = ref<ListItem[]>([\n  { id: 1, name: '项目 A' },\n  { id: 2, name: '项目 B' },\n  { id: 3, name: '项目 C' },\n])\n\n\u002F\u002F 用对象（而不是数组）存 ref，避免列表增删时索引错位\nconst popoverRefs = ref<Record<number, InstanceType<typeof ElPopover>>>({})\n\nfunction setPopoverRef(el: unknown, index: number) {\n  if (el) {\n    popoverRefs.value[index] = el as InstanceType<typeof ElPopover>\n  } else {\n    \u002F\u002F el 为 null 时说明组件已卸载，清理引用\n    delete popoverRefs.value[index]\n  }\n}\n\nfunction closePopover(index: number) {\n  const instance = popoverRefs.value[index]\n  if (!instance) return\n  Reflect.get(instance, 'hide').call(instance)\n}\n\nfunction handleConfirm(index: number) {\n  const item = list.value[index]\n  console.log('确认修改：', item.name)\n  \u002F\u002F 业务逻辑...\n  closePopover(index)\n}\n<\u002Fscript>\n\n<style scoped>\n.list-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 0;\n}\n\n.popover-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n  margin-top: 8px;\n}\n<\u002Fstyle>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3 id=\"为什么用对象而不是数组\">为什么用对象而不是数组\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-ts\">\u002F\u002F ❌ 用数组的问题：列表删除第 1 项后，索引全部错位\nconst popoverRefs = ref<InstanceType<typeof ElPopover>[]>([])\n\n\u002F\u002F ✅ 用对象存，key 是稳定的 index（或更好：item.id）\nconst popoverRefs = ref<Record<number, InstanceType<typeof ElPopover>>>({})\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>如果列表项有稳定的 \u003Ccode>id\u003C\u002Fcode>，把 key 换成 \u003Ccode>item.id\u003C\u002Fcode> 更可靠：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-ts\">function setPopoverRef(el: unknown, id: number) {\n  if (el) {\n    popoverRefs.value[id] = el as InstanceType<typeof ElPopover>\n  } else {\n    delete popoverRefs.value[id]\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Chr>\n\u003Ch2 id=\"完整示例-带关闭其他-popover-的版本\">完整示例：带关闭其他 popover 的版本\u003C\u002Fh2>\n\u003Cp>点击某一行时，先关闭所有已打开的 popover，再让当前的弹出（避免多个同时展示）：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-vue\"><template>\n  <el-table :data="tableData">\n    <el-table-column prop="name" label="名称" \u002F>\n    <el-table-column label="操作" width="120">\n      <template #default="{ row, $index }">\n        <el-popover\n          :ref="(el) => setPopoverRef(el, row.id)"\n          placement="left"\n          :width="200"\n          trigger="click"\n          @show="closeOthers(row.id)"\n        >\n          <template #default>\n            <el-button\n              type="danger"\n              size="small"\n              @click="handleDelete(row, $index)"\n            >\n              确认删除\n            <\u002Fel-button>\n          <\u002Ftemplate>\n          <template #reference>\n            <el-button type="text" size="small">删除<\u002Fel-button>\n          <\u002Ftemplate>\n        <\u002Fel-popover>\n      <\u002Ftemplate>\n    <\u002Fel-table-column>\n  <\u002Fel-table>\n<\u002Ftemplate>\n\n<script setup lang="ts">\nimport { ref } from 'vue'\nimport { ElPopover, ElMessage } from 'element-plus'\n\nconst tableData = ref([\n  { id: 1, name: '记录 A' },\n  { id: 2, name: '记录 B' },\n  { id: 3, name: '记录 C' },\n])\n\nconst popoverRefs = ref<Record<number, InstanceType<typeof ElPopover>>>({})\n\nfunction setPopoverRef(el: unknown, id: number) {\n  if (el) {\n    popoverRefs.value[id] = el as InstanceType<typeof ElPopover>\n  } else {\n    delete popoverRefs.value[id]\n  }\n}\n\n\u002F\u002F 关闭除 excludeId 之外的所有 popover\nfunction closeOthers(excludeId: number) {\n  for (const [id, instance] of Object.entries(popoverRefs.value)) {\n    if (Number(id) !== excludeId && instance) {\n      Reflect.get(instance, 'hide').call(instance)\n    }\n  }\n}\n\nfunction handleDelete(row: { id: number; name: string }, index: number) {\n  \u002F\u002F 关闭当前 popover\n  Reflect.get(popoverRefs.value[row.id], 'hide').call(popoverRefs.value[row.id])\n  tableData.value.splice(index, 1)\n  ElMessage.success(`已删除：${row.name}`)\n}\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>@show\u003C\u002Fcode> 事件在 popover 打开时触发，此时关闭其他的，体验上比较自然。\u003C\u002Fp>\n\u003Chr>\n\u003Ch2 id=\"小结\">小结\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>场景\u003C\u002Fth>\n\u003Cth>方案\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>单个 popover，手动关闭\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>ref\u003C\u002Fcode> + \u003Ccode>Reflect.get(instance, 'hide').call(instance)\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>多个 popover，关闭指定一个\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>ref\u003C\u002Fcode> 对象（key 用 id）+ 同上\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>打开一个时关闭其他\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>@show\u003C\u002Fcode> 事件里遍历关闭其他实例\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>核心是两点：\u003C\u002Fp>\n\u003Col>\n\u003Cli>不要维护 \u003Ccode>visible\u003C\u002Fcode> 数组，复杂度不值得。\u003C\u002Fli>\n\u003Cli>直接 \u003Ccode>.hide()\u003C\u002Fcode> 因为 Vue3 Proxy 可能失效，用 \u003Ccode>Reflect.get\u003C\u002Fcode> 绕过去。\u003C\u002Fli>\n\u003C\u002Fol>\n","2024-10-25",[11,12,13],"vue","element-plus","vue3",false,[16,29,40,52,62,69,76,83,90,97,107,116,126,135,143,151,160,169,178,188,195,205,211,218,224,233,240,247,255,265,273,276,286,296,306,314,324,335,345,354,362,368,376,384,392,400,408,415],{"slug":17,"title":18,"description":19,"pub_date":20,"tags":21,"draft":14,"word_count":28},"ide-skills-guide","Agent Skills 完全指南：21 款第三方 Skill 深度评测与使用心得","全面评测 21 款第三方 Agent Skills，涵盖 Vue 生态、前端设计、构建工具、实用工具四大分类。从安装配置到实际使用场景，带你了解每个 Skill 的功能特点、最佳实践与使用心得。","2026-06-15",[22,23,24,25,26,27],"agent","skills","AI","效率工具","前端","Vue",4169,{"slug":30,"title":31,"description":32,"pub_date":33,"tags":34,"draft":14,"word_count":39},"linux-kernel-skeleton-struct-funcptr-container_of","Linux 内核骨架：struct、函数指针与 container_of","读懂 Linux 内核源码的三件套：巨大的 struct 组合代替继承、函数指针表实现虚派发、container_of 宏从嵌入成员找回完整对象。","2026-05-09",[35,36,37,38],"linux","kernel","C","container_of",1369,{"slug":41,"title":42,"description":43,"pub_date":44,"tags":45,"draft":14,"word_count":51},"astro-complete-guide-2025","Astro 5 深度剖析：Islands 架构原理、构建优化与 Cloudflare Workers 边缘部署","从编译器视角解析 Astro 5 的 Islands 架构实现原理，Content Layer API 的 Vite 插件机制，Server Islands 的流式渲染，以及如何在 Cloudflare Workers + D1 边缘环境下榨干性能。","2026-05-08",[46,47,48,49,50],"astro","frontend","cloudflare","performance","architecture",3663,{"slug":53,"title":54,"description":55,"pub_date":56,"tags":57,"draft":14,"word_count":61},"llm-prompt-engineering","Prompt Engineering 实战：让 LLM 真正听话的技巧","System prompt 怎么写、Few-shot 怎么设计、Chain-of-Thought 原理，以及常见失败模式和调试方法。","2026-05-03",[58,59,60],"ai","llm","工程实践",1723,{"slug":63,"title":64,"description":65,"pub_date":56,"tags":66,"draft":14,"word_count":68},"rag-system-design","RAG 系统设计：从 naive 到 production-ready","Retrieval-Augmented Generation 不只是「向量数据库 + LLM」，分块策略、召回质量、重排序、缓存才是工程核心。",[58,67,59,60],"rag",1613,{"slug":70,"title":71,"description":72,"pub_date":56,"tags":73,"draft":14,"word_count":75},"git-advanced-workflow","Git 进阶工作流：rebase、cherry-pick、bisect 的正确使用","merge 会了，但 rebase 总搞错？bisect 找 bug 提交？interactive rebase 整理历史？这篇一次说清楚。",[74,60],"git",1396,{"slug":77,"title":78,"description":79,"pub_date":56,"tags":80,"draft":14,"word_count":82},"docker-practical-guide","Docker 实战：从会用到用好","会 docker run 不够，Dockerfile 最佳实践、多阶段构建、Compose 编排、镜像瘦身才是日常真正需要的。",[81,35,60],"docker",1268,{"slug":84,"title":85,"description":86,"pub_date":56,"tags":87,"draft":14,"word_count":89},"anthropics-skills-guide","anthropics\u002Fskills：Anthropic 官方 Agent Skills 仓库解析","Anthropic 官方开源的 Agent Skills 标准仓库，127k stars，解析 SKILL.md 规范、17 个示例 skill 的设计模式，以及如何在 Claude Code \u002F Claude.ai \u002F API 中使用",[58,88,22,23],"Claude",2090,{"slug":91,"title":92,"description":93,"pub_date":56,"tags":94,"draft":14,"word_count":96},"karpathy-claude-code-guidelines","Karpathy 的 LLM 编码批评与 CLAUDE.md 最佳实践","基于 Andrej Karpathy 对 LLM 编程助手的观察，forrestchang 提炼出一个 CLAUDE.md 文件，4 条原则解决 AI 编码的典型失控问题：乱猜假设、过度设计、乱改代码、目标不清",[58,88,95,60],"Claude Code",2699,{"slug":98,"title":99,"description":100,"pub_date":56,"tags":101,"draft":14,"word_count":106},"typescript-advanced-patterns","TypeScript 高级模式：让类型系统为你工作","基础 TS 会了但类型总是 any？条件类型、映射类型、模板字面量类型、infer 关键字才是 TS 的真正威力。",[102,103,104,105],"typescript","类型系统","前端工程","高级模式",1419,{"slug":108,"title":109,"description":110,"pub_date":56,"tags":111,"draft":14,"word_count":115},"linux-performance-tuning","Linux 性能调优实战：从 top 到 perf 的完整工具链","遇到性能问题不知道从哪下手？这篇建立系统化的排查思路，从 CPU\u002F内存\u002FIO\u002F网络逐层分析。",[35,112,113,114],"性能","运维","系统编程",1524,{"slug":117,"title":118,"description":119,"pub_date":56,"tags":120,"draft":14,"word_count":125},"python-functional-programming","Python 函数式编程：map\u002Ffilter\u002Freduce 之外","Python 不是纯函数式语言，但 functools、itertools、偏函数、闭包这些工具用好了能让代码简洁一个量级。",[121,122,123,124],"python","函数式","闭包","装饰器",1867,{"slug":127,"title":128,"description":129,"pub_date":56,"tags":130,"draft":14,"word_count":134},"python-oop-guide","Python 面向对象：__init__ 之外你需要知道的","Python OOP 不只是 class + __init__，魔术方法、描述符、元类才是真正的武器。",[121,131,132,133],"OOP","面向对象","魔术方法",1792,{"slug":136,"title":137,"description":138,"pub_date":56,"tags":139,"draft":14,"word_count":142},"python-data-structures","Python 内置数据结构深度解析","list、dict、set、tuple 不只是数据容器，搞懂它们的底层实现和时间复杂度，才能写出高性能 Python。",[121,140,112,141],"数据结构","算法",1517,{"slug":144,"title":145,"description":146,"pub_date":56,"tags":147,"draft":14,"word_count":150},"python-basics-quick-start","Python 快速上手：写给有编程基础的人","已经会其他语言，想快速掌握 Python 的语法特性和思维方式，这篇是捷径。",[121,148,149],"入门","基础",1607,{"slug":152,"title":153,"description":154,"pub_date":56,"tags":155,"draft":14,"word_count":159},"python-dataclass-pydantic","Python dataclass vs Pydantic：数据类选型指南","dataclass 是标准库的轻量选择，Pydantic v2 是带验证的重武器，什么时候用哪个，这篇说清楚。",[121,156,157,158],"dataclass","pydantic","数据验证",1323,{"slug":161,"title":162,"description":163,"pub_date":56,"tags":164,"draft":14,"word_count":168},"python-asyncio-practical","Python asyncio 实战：从回调地狱到协程优雅","asyncio 是 Python 异步编程的核心，搞懂 event loop、Task、gather 这些概念才能写出真正高效的异步代码。",[121,165,166,167],"asyncio","并发","网络编程",1258,{"slug":170,"title":171,"description":172,"pub_date":56,"tags":173,"draft":14,"word_count":177},"python-type-hints-guide","Python 类型注解完全指南：从入门到实践","Python 3.5+ 引入类型注解，配合 mypy\u002Fpyright 让 Python 也能享受静态类型检查的好处。",[121,174,175,176],"typescript-style","type-hints","工具链",1102,{"slug":179,"title":180,"description":181,"pub_date":182,"tags":183,"draft":14,"word_count":187},"pwa-install-update-button","PWA 踩坑：为什么安装按钮从来不出现","从 beforeinstallprompt 到 Service Worker waiting，把 PWA 的安装与更新提示真正做对","2026-05-02",[184,185,186],"pwa","javascript","web",1683,{"slug":189,"title":190,"description":191,"pub_date":192,"tags":193,"draft":14,"word_count":194},"openclaw-vs-hermes-agent","OpenClaw vs Hermes Agent：两个本地优先 Agent 的设计差异","OpenClaw（Novita AI）和 Hermes Agent（Nous Research）都是本地运行的个人 AI Agent，但在记忆系统、技能学习、运行环境和模型生态上走了不同的路。深入对比两种架构的核心差异。","2026-05-01",[58,22,59],1679,{"slug":196,"title":197,"description":198,"pub_date":192,"tags":199,"draft":14,"word_count":204},"cpp-random-design-patterns","C++ 设计模式实战：RAII、观察者、工厂","用现代 C++（C++17\u002F20）实现三种高频设计模式：RAII 资源管理、观察者模式事件系统、工厂模式插件架构。每种模式给出问题场景、实现代码和真实工程案例。",[200,201,202,203],"cpp","设计模式","c++17","工程",2613,{"slug":206,"title":207,"description":208,"pub_date":192,"tags":209,"draft":14,"word_count":210},"data-structures-fundamentals","数据结构基础：从数组到红黑树","系统梳理常用数据结构的核心原理、时间复杂度和适用场景。数组、链表、栈、队列、哈希表、二叉树、堆、图，每种结构附实现要点和 C++ 代码片段。",[140,141,200,149],3004,{"slug":212,"title":213,"description":214,"pub_date":215,"tags":216,"draft":14,"word_count":217},"ai-agent-what-is","什么是 AI Agent？从 LLM 到自主执行","LLM 本身是无状态问答机，Agent 是什么让它’动’起来的？本文深入解析 Agent 的四个核心能力、ReAct 框架、工具调用原理，以及主流框架横向对比。","2026-04-30",[58,22,59],2116,{"slug":219,"title":220,"description":221,"pub_date":215,"tags":222,"draft":14,"word_count":223},"ai-agent-memory","AI Agent 的记忆系统：从上下文窗口到长期记忆","深入拆解 AI Agent 的四种记忆类型、上下文窗口压缩策略、RAG 向量检索原理，以及三种典型失败模式和工程选型建议。",[58,22,67],2052,{"slug":225,"title":226,"description":227,"pub_date":215,"tags":228,"draft":14,"word_count":232},"network-proxy-vpn-guide","代理与翻墙技术原理：从 HTTP 代理到现代协议","深入解析代理与 VPN 的本质区别，梳理从 SOCKS5 到 Shadowsocks、V2Ray\u002FXray、Hysteria2 的协议演进，以及机场订阅的技术本质。",[229,230,231],"网络","代理","协议",2148,{"slug":234,"title":235,"description":236,"pub_date":215,"tags":237,"draft":14,"word_count":150},"algorithm-binary-search","二分查找：永远写不对？记住这个模板","彻底搞清楚二分查找的边界问题：闭区间和左闭右开两套模板、三道经典 LeetCode 题目完整 C++ 实现，以及二分答案的进阶思路。",[141,238,239,200],"二分查找","leetcode",{"slug":241,"title":242,"description":243,"pub_date":215,"tags":244,"draft":14,"word_count":246},"algorithm-sliding-window","滑动窗口算法：从暴力到 O(n) 的思维跃迁","系统讲解滑动窗口算法的核心模板、适用题型，配合三道经典 LeetCode 题目的完整 C++ 实现，彻底理解双指针收缩思路。",[141,245,239,200],"滑动窗口",1943,{"slug":248,"title":249,"description":250,"pub_date":215,"tags":251,"draft":14,"word_count":254},"network-clash-config","Clash \u002F Mihomo 配置详解：规则、策略组与分流","深入解析 Clash\u002FMihomo 的核心配置结构，包括代理节点、策略组类型、规则优先级、DNS fake-ip 模式，以及一份实用的完整配置模板。",[229,252,230,253],"clash","配置",1292,{"slug":256,"title":257,"description":258,"pub_date":259,"tags":260,"draft":14,"word_count":264},"hid-hotplug","HID 设备热插拔检测：从 udev 到 node-hid","在 Linux 上用 node-hid + usb 库实现可靠的 USB HID 设备热插拔检测，踩坑记录","2026-04-28",[200,261,35,262,263],"hid","nodejs","electron",2039,{"slug":266,"title":267,"description":268,"pub_date":269,"tags":270,"draft":14,"word_count":272},"electron-ipc-types","Electron IPC 类型安全：从 any 到完全类型化","用 TypeScript 泛型封装 Electron IPC，彻底消灭 any，preload 契约集中管理","2026-04-25",[263,102,271,11],"ipc",1446,{"slug":4,"title":5,"description":6,"pub_date":9,"tags":274,"draft":14,"word_count":275},[11,12,13],1321,{"slug":277,"title":278,"description":279,"pub_date":280,"tags":281,"draft":14,"word_count":285},"vite-vue3-ts-elementplus-pinia","用 Vite+（vp）从零搭建 Vue3 + TypeScript + Element Plus + Pinia + Vue Router","使用 Vite+ 统一工具链（vp）一条命令搭建 Vue3 全家桶，涵盖按需导入、Pinia store、路由配置，以及常见坑的解决方案。","2024-08-27",[11,282,102,12,283,284],"vite","pinia","vite-plus",1960,{"slug":287,"title":288,"description":289,"pub_date":290,"tags":291,"draft":14,"word_count":295},"cef-lnk2038-iterator-debug-level","CEF LNK2038：解决 _ITERATOR_DEBUG_LEVEL 不匹配错误","分析 CEF（Chromium Embedded Framework）集成时出现的 LNK2038 _ITERATOR_DEBUG_LEVEL 链接错误，从根本原因到解决方案的完整指南。","2024-05-07",[200,292,293,294],"CEF","Visual Studio","链接错误",1509,{"slug":297,"title":298,"description":299,"pub_date":300,"tags":301,"draft":14,"word_count":305},"npm-electron-install-fix","彻底解决 npm 安装 Electron 失败的问题","分析 npm install electron 失败的根本原因（下载二进制超时\u002F被墙），通过国内镜像（npmmirror）彻底解决，并介绍多种备选方案和常见错误排查。","2024-03-01",[263,302,303,304],"npm","前端工具链","国内镜像",1494,{"slug":307,"title":308,"description":309,"pub_date":310,"tags":311,"draft":14,"word_count":313},"git-out-of-memory","解决 git 报错：Fatal: Out of memory, malloc failed","分析 git 大仓库操作时出现 Out of memory malloc failed 的根本原因，通过调整 pack.windowMemory、http.postBuffer 和 git repack 彻底解决。","2024-01-31",[74,35,312],"工具",2244,{"slug":315,"title":316,"description":317,"pub_date":318,"tags":319,"draft":14,"word_count":323},"vmware-tools-install","在 VMware 虚拟机中安装 open-vm-tools 完整指南","详解 VMware Tools 的作用、open-vm-tools 与官方 VMware Tools 的区别，以及在 Ubuntu 虚拟机中安装并生效的完整步骤和常见问题排查。","2023-11-21",[320,35,321,322],"VMware","Ubuntu","虚拟机",2523,{"slug":325,"title":326,"description":327,"pub_date":328,"tags":329,"draft":14,"word_count":334},"load-balancing-algorithms","负载均衡算法完全指南：从轮询到一致性哈希","系统梳理静态与动态负载均衡算法，涵盖轮询、随机、权重、IP Hash、一致性 Hash、最少连接、最快响应等，并对比 Nginx、Dubbo、Spring Cloud LoadBalancer 的实现差异。","2023-11-15",[330,331,332,333],"分布式","负载均衡","Nginx","微服务",1764,{"slug":336,"title":337,"description":338,"pub_date":339,"tags":340,"draft":14,"word_count":344},"win-cw2a-ca2w","ATL 字符串转换：CW2A 与 CA2W 完全指南","详解 ATL 宏 CW2A\u002FCA2W 在 Unicode 与 ANSI 之间的字符串转换用法、头文件依赖、USES_CONVERSION 宏的作用与常见陷阱。","2023-06-09",[200,341,342,343],"windows","ATL","字符串",1665,{"slug":346,"title":347,"description":348,"pub_date":339,"tags":349,"draft":14,"word_count":353},"csharp-sendmessage-cpp","C# 通过 SendMessage 向 C++ 窗口发送消息与字符串","使用 P\u002FInvoke 调用 user32.dll 的 SendMessage，从 C# 发送自定义 WM_USER 消息及字符串指针给 C++ 原生窗口，并在 C++ 侧正确接收和转换。",[350,200,341,351,352],"C#","互操作","PInvoke",1554,{"slug":355,"title":356,"description":357,"pub_date":358,"tags":359,"draft":14,"word_count":361},"win-postmessage-vector","Windows PostMessage 跨线程传递 std::vector 指针","通过 PostMessage 在 Windows 消息队列中传递 std::vector 指针，使用 reinterpret_cast 将指针装入 LPARAM，并在接收方正确释放内存。","2023-05-26",[200,341,360],"WinAPI",1823,{"slug":363,"title":364,"description":365,"pub_date":358,"tags":366,"draft":14,"word_count":367},"exe-dll-single-package","将 EXE 和 DLL 打包成单一可执行文件","介绍两种将 exe 和依赖 dll 打包成单文件的方案：Enigma Virtual Box 和 WinRAR 自解压，适合发布 Windows 桌面程序时简化分发流程。",[341,200,312],1619,{"slug":369,"title":370,"description":371,"pub_date":358,"tags":372,"draft":14,"word_count":375},"cpp-random-mt19937","C++ 现代随机数生成：用 mt19937 彻底告别 rand()","深入讲解为什么 rand() 不够用，以及如何用 C++11 的 \u003Crandom> 库正确生成高质量随机数，涵盖 mt19937、各种分布和线程安全。",[200,373,374],"c++11","random",1549,{"slug":377,"title":378,"description":379,"pub_date":380,"tags":381,"draft":14,"word_count":383},"win-startup-registry","C++ 实现程序开机自启动：注册表方式详解","通过操作 Windows 注册表 Run 键实现程序开机自启动，包括 HKCU 与 HKLM 区别、完整封装代码、工作目录问题和 UAC 权限处理。","2022-12-26",[341,200,382],"registry",1201,{"slug":385,"title":386,"description":387,"pub_date":388,"tags":389,"draft":14,"word_count":391},"mfc-cstring-wparam","MFC 中 CString 与 WPARAM 之间的转换","详解 MFC 消息传递中 CString 无法直接强转为 WPARAM 的原因，以及两种正确的转换方案，并介绍结构体指针传递的正确姿势。","2022-11-25",[390,200,341],"mfc",1546,{"slug":393,"title":394,"description":395,"pub_date":396,"tags":397,"draft":14,"word_count":399},"duilib-static-build","正确编译 Duilib 静态库：避免 ATL 依赖和链接错误","详解如何用 DuiLib_Static.vcxproj 编译 Duilib 静态库，解决 VARIANT 未定义、Unicode 配置不匹配和 ATL 依赖等常见问题。","2022-08-24",[200,398,341,390],"duilib",2639,{"slug":401,"title":402,"description":403,"pub_date":404,"tags":405,"draft":14,"word_count":407},"mfc-dpi-adaptive","MFC 界面自适应不同分辨率","MFC 对话框程序实现控件和字体随分辨率自动缩放的完整方案，附 DPI Awareness 配置说明","2022-08-17",[390,200,341,406],"dpi",1414,{"slug":409,"title":410,"description":411,"pub_date":412,"tags":413,"draft":14,"word_count":414},"mfc-drag-window","MFC 无标题栏窗口客户区拖动：三种方法对比","MFC 对话框去掉标题栏后如何实现拖动移动窗口，三种方案完整实现与适用场景分析","2022-08-16",[390,200,341],1633,{"slug":416,"title":417,"description":418,"pub_date":419,"tags":420,"draft":14,"word_count":422},"algorithm-number-complement","整数的补数：位运算掩码解法","LeetCode 476 题，用掩码 XOR 实现整数补数，附 C++\u002FPython\u002FJava 三种实现及补数与补码的区别","2021-03-08",[141,421,239],"位运算",1374,[]]