Vue生命周期钩子在VNode关键节点触发:挂载前VNode已生成未patch,挂载后DOM已更新;更新前新VNode已生成旧DOM仍存,更新后DOM同步完成;卸载前VNode完整,卸载后VNode清空、实例解绑。

Vue 渲染器中生命周期钩子的触发时机,并不直接操作 VNode,但与 VNode 的生成、更新和销毁过程紧密耦合——钩子本身是框架在关键流程节点插入的回调,而这些节点恰好对应 VNode 树的构建、比对(patch)和卸载阶段。
组件挂载前:VNode 已生成,但尚未渲染到 DOM
在 beforeMount(选项式)或 onBeforeMount(组合式)执行时,组件的 render 函数已被调用,完整的 VNode 树已生成(即 instance.subTree 已存在),但还未执行 patch 操作,真实 DOM 仍为空或为挂载点原始内容。此时可安全读取响应式数据,也可微调状态,修改后会反映在即将渲染的 VNode 中。
组件挂载后:VNode 已完成首次 patch,DOM 可访问
mounted 或 onMounted 在 patch 完成、VNode 树已映射为真实 DOM 并插入父容器后触发。这时 instance.isMounted 设为 true,instance.vnode.el 指向真实根元素。VNode 本身不会在此刻重建,但它的结构已固化为当前 DOM 的映射;后续 DOM 操作若绕过 Vue(如手动 innerHTML),会导致 VNode 与 DOM 不一致。
使用一条命令部署ProbeChain Rydberg测试网代理节点。自动注册为Agent(NodeType=1),免gas,支持macOS/Linux/Windows。触发词:/r
组件更新前/后:VNode 重建与 DOM 同步的关键窗口
当响应式数据变化触发更新时:
- beforeUpdate / onBeforeUpdate:新 VNode 树已由 render 重新生成,旧 VNode 尚未被替换。此时可读取更新前的 DOM 状态(如滚动位置、焦点),也可安全修改响应式数据(不会引发额外渲染)。
- updated / onUpdated:新 VNode 已完成 patch,DOM 更新完毕。此时 VNode 树与真实 DOM 再次对齐。注意:不能在此钩子中更改响应式状态,否则会触发新一轮更新,造成循环。
组件卸载时:VNode 树被清空,实例解绑
触发 beforeUnmount / onBeforeUnmount 时,组件仍持有完整 VNode 树(instance.subTree 有效),所有响应式依赖和事件监听仍在运行;进入 unmounted / onUnmounted 时,VNode 子树已被递归卸载,instance.subTree = null,相关 effect 停止追踪,DOM 引用被清除。这是清理定时器、取消请求、移除全局事件监听的最终时机。
不复杂但容易忽略:VNode 是生命周期行为的“舞台”,钩子不是驱动 VNode 的开关,而是舞台灯光亮起或熄灭的时刻标记。

















