vue.js 中没有 vnode 的生命周期，vnode 是描述 dom 结构的纯数据对象；真正的生命周期属于组件实例和渲染器对 vnode 的处理过程。

Vue.js 中并没有 VNode 的“生命周期”这一概念。VNode（虚拟节点）是纯粹的数据结构，描述 DOM 应该长什么样，它本身不挂载、不更新、不销毁，也没有钩子函数或状态。所谓“VNode 生命周期”，其实是对 组件实例化与挂载过程中 VNode 如何被创建、补丁（patch）、复用和丢弃 这一过程的误读或简化表达。真正拥有生命周期的是 组件实例（Component Instance） 和 渲染器（Renderer）在 diff 阶段对 VNode 的处理逻辑。

组件实例化驱动 VNode 的生成与消费

当调用 createApp() 或 new Vue()（Vue 2）后，组件选项/Setup 函数被执行，触发 render 函数调用，返回一个 VNode 树。这个过程发生在组件实例创建之后、挂载之前：

• 组件实例（instance）先完成 data 响应式初始化、props 解析、setup 执行等；
• 接着执行 render()，此时可访问 this（Vue 2）或 setup() 上下文（Vue 3），生成 VNode；
• VNode 是“快照”，不持有引用，也不绑定任何响应式依赖——依赖收集发生在 render 函数执行时（通过 Proxy/defineProperty 触发 getter）；
• 因此，VNode 的“诞生”完全依赖组件实例的状态和生命周期阶段（例如：只有在 beforeMount 后才首次生成用于挂载的 VNode）。

patch 过程中 VNode 的“行为”由 Renderer 控制

Vue 的核心渲染逻辑（patch）负责比对新旧 VNode 并操作真实 DOM。VNode 在此过程中表现为不同角色，但其“行为”由 Renderer 根据类型和上下文决定：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• 普通元素 VNode：直接创建/更新/移除 DOM 元素，无钩子；
• 组件 VNode：触发子组件的实例化流程（mountComponent）或复用已有实例（updateComponentPreRender）；
• 动态组件（<component :is="..."></component>）：卸载旧组件实例、销毁其 VNode 树，再创建新组件实例并生成新 VNode；
• v-if 分支：对应 VNode 被设为 null，Renderer 直接跳过，触发组件实例的 unmounted 钩子（若已挂载）。

关键关联点：哪些生命周期钩子明确影响 VNode 构建？

组件生命周期钩子本身不操作 VNode，但它们所处的时机决定了 render 函数何时执行、VNode 树是否重建：

• setup() / beforeCreate / created：此时尚未生成 VNode，但可准备响应式数据，影响后续 render 结果；
• beforeMount：组件实例已创建，render() 尚未执行（Vue 3）或即将首次执行（Vue 2），VNode 即将生成；
• mounted：VNode 已完成 patch，真实 DOM 已就位，此时访问 $el 或 ref 才安全；
• beforeUpdate：响应式数据变更已触发，render() 将再次执行，产生新的 VNode 树；
• updated：新旧 VNode 已完成 patch，DOM 更新完毕，VNode 树已完成替换。

避免常见误解

开发中容易混淆的几个点：

• VNode 不是对象实例，不能调用方法、没有 this、无法监听属性变化；
• key 的作用是让 Renderer 识别 VNode 的身份，决定复用还是新建组件实例，不是给 VNode “加生命周期”；
• 使用 h() 手动创建 VNode 时，它仍只是 JS 对象，必须传入 render 函数或作为 slot 内容，才会进入渲染流程；
• SSR 中 VNode 在服务端生成并序列化，但服务端没有组件“生命周期”（如 mounted），仅执行到 render 阶段。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！