vue中通过变更vnode.key强制刷新组件，本质是让diff算法判定为全新节点，触发销毁重建；典型做法是绑定动态key（如:key="componentkey"并递增），但会丢失内部状态。
vnode.key 是 Vue 渲染器中用于标识虚拟节点（VNode）唯一性的核心字段，它不参与视图渲染，但深度影响 diff 算法的行为。所谓“强制刷新”，本质是通过变更 key 值，让 Vue 在 patch 阶段判定为“全新节点”，从而跳过复用逻辑，触发组件实例销毁 + 重建，实现彻底重置。
key 如何触发节点重置？
Vue 的 diff 算法（位于 src/core/vdom/patch.js#updateChildren）在比对新旧子节点列表时，会优先依据 key 进行映射匹配：
Rydberg Agent Node
下载
使用一条命令部署ProbeChain Rydberg测试网代理节点。自动注册为Agent(NodeType=1)，免gas，支持macOS/Linux/Windows。触发词：/r
- 若两个 VNode 的
key相同且sameVnode()返回 true，则尝试就地 patch（复用 DOM、更新 props、触发beforeUpdate等） - 若
key不同，即使标签名、props 完全一致，也会被当作“不同节点”处理：旧节点调用destroy()，新节点执行完整createElm()流程 - 当
:key="+new Date()"或:key="timestamp++"被使用时，每次渲染都生成新 key → 每次都被判为“全新节点” → 组件实例被销毁并新建
源码级关键路径：从 key 变化到实例重建
以 Vue 2.x 为例，核心流程如下（精简主干）：
-
patch(oldVnode, newVnode)入口开始比对 - 进入
updateChildren()处理子节点列表 - 构建
oldKeyToIdx映射表（遍历旧 children，以vnode.key为键存索引） - 遍历新 children：对每个
newCh[i]，查oldKeyToIdx[newCh[i].key] - 若查不到（即 key 不存在于旧列表），直接执行
createElm(newCh[i])→ 新建 DOM 和组件实例 - 若查到但
sameVnode(oldCh[idx], newCh[i]) === false（比如 key 相同但 tag 不同），则先removeVnodes()销毁旧节点，再createElm() - 组件初始化时，
init()钩子被调用 → 触发beforeCreate→created→mounted
为什么用 index 当 key 会出问题？
数组顺序变化时，index 会错位，导致 key 与真实数据脱钩：
- 初始：
[{id:1}, {id:2}, {id:3}]→ key 分别为0,1,2 - 拖拽交换第 1 和第 2 项后：
[{id:2}, {id:1}, {id:3}]→ key 仍为0,1,2 - diff 时，key=0 的节点（原 id=1）现在对应 id=2 的数据 → Vue 就地 patch，只更新内部值，不重建实例 → 表单状态、滚动位置、定时器等残留
- 而用
:key="item.id"，顺序变则 key 顺序自然变，diff 正确识别移位，该移动的移动，该重建的重建
强制刷新的典型写法与注意事项
- 手动控制：定义响应式
componentKey，点击时递增 →<mycomp :key="componentKey"></mycomp> - 时间戳临时方案：仅限调试或极简场景，
:key="+new Date()"会造成高频 GC，不推荐生产环境 - 避免重复 key：相同父级下 key 必须唯一，否则 Vue 报 warning 且 diff 行为不可预测
- 注意副作用：强制刷新会丢失当前组件内所有非响应式状态（如
setInterval、canvas.getContext、第三方库实例），需在beforeDestroy中清理，在mounted中重建
