vue实例只管理自身子树，通过_vnode/vnode持有根vnode，渲染器统一调度创建、更新与卸载；组件是内容生产者而非树管理者，插槽vnode跨实例流动但由父组件驱动更新。

Vue 实例并不管理整棵 VNode 树，而是只负责自己那一小块子树——它通过 _vnode（Vue 2）或 vnode（Vue 3）属性持有当前渲染的根 VNode，并配合渲染器完成创建、更新与卸载。

这个设计让组件职责清晰：实例是“内容生产者”，不是“树管理者”。真正的组织、比对、挂载逻辑，全部由渲染器统一调度。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

每个组件实例对应一个根 VNode 节点

• 父组件 render 时遇到 <userlist></userlist>，会调用 createComponent 生成一个组件类型 VNode；
• 这个 VNode 的 type 是组件构造函数（如 UserList），componentOptions 中存着 props、slots 等信息；
• 它本身不包含子结构，只是一个“占位符”，但明确指向该组件应渲染的范围；
• patch 阶段识别到它是组件节点，才会触发子组件实例化，并让它生成自己的 VNode 子树。

_vnode 属性始终指向本次渲染的根 VNode

• 组件实例内部的 _vnode 是动态引用：响应式更新后重新执行 render，新 VNode 生成并赋值给 _vnode；
• _vnode.el 指向对应的真实 DOM 元素，由渲染器在挂载完成后设置；
• 卸载时，_vnode 会被置为 null，旧 VNode 进入回收流程（若使用 KeepAlive，则缓存实例和 _vnode，跳过销毁）。

插槽让父级 VNode 跨实例流动

• 父组件把 $slots.default?.() 返回的 VNode 数组传给子组件；
• 这些 VNode 仍属于父组件的作用域和响应式上下文，但被插入到子组件的 VNode 子树中；
• 渲染时，它们最终挂载在子组件的 DOM 范围内，但更新逻辑仍由父组件驱动；
• 同一段 VNode 可被多个实例“看到”，但只由一个实例负责最终挂载。

渲染器统一控制 diff 和挂载

• 组件实例不遍历、不修改兄弟或父级的 VNode；
• 不主动触发其他组件更新，也不参与跨组件的比对；
• 当自身状态变化，effect 触发后，最终调用 renderer.patch(_vnode, oldVNode)，交由渲染器执行 diff；
• 渲染器决定何时激活/停用缓存组件、如何复用静态节点、怎样合并 class/style 等细节。

不复杂但容易忽略

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