简明关系图
- VNode：一次“渲染描述”的虚拟节点（元素/文本/Fragment/组件等）。
- Component Instance（组件实例）：当 VNode 的 type 是组件时，渲染器会为它创建并持有的运行期对象（状态、生命周期、渲染 effect 等）。
二者如何关联
- 组件 VNode 挂载时：
- 渲染器检测到“组件型 VNode”（看 shapeFlag 与 type），创建组件实例 instance，并赋到 vnode.component。
- 运行 setup、建立 instance.proxy（即模板里的 this），执行 render 生成子树 instance.subTree（一棵元素/文本等 VNode 树）。
- 继续对 subTree 做 patch，最终把 DOM 挂到根 VNode 的 vnode.el 上。
- 组件更新时：
-
新旧两个组件 VNode（n1/n2）都会指向同一个 instance（n2.el = n1.el；n2.component = n1.component），实例持久，VNode 每次渲染都会新建。
-
普通元素 VNode：
- 没有组件实例，vnode.component 为 undefined，vnode.el 直接指向真实 DOM。
关键字段对照
- vnode.type：组件定义/标签名（组件 VNode 时为组件定义）。
- vnode.component：指向对应的组件实例（仅组件 VNode）。
- instance.vnode：当前这次渲染对应的组件 VNode。
- instance.subTree：组件渲染产出的子 VNode 树（最终挂 DOM）。
- vnode.el：该 VNode 对应的真实 DOM（组件 VNode 的 el 来自其 subTree.el）。
一句话总结
- VNode 是“本次渲染的描述”，组件实例是“跨渲染持久的运行体”；组件型 VNode 会指向组件实例（vnode.component），实例再通过 render 产出元素型 VNode 子树去落地到 DOM。
