核心目标是用最少DOM操作更新视图并保全状态：插入即创建挂载新节点；移动即复用节点调用insertBefore重排位置；删除即精准removeChild卸载无对应key的旧节点。
渲染器处理节点的插入、移动和删除，核心目标是用最少的 DOM 操作达成视图更新，同时保全节点状态。这三类操作不是孤立执行的，而是在 Diff 算法驱动下协同判断的结果：先比对新旧虚拟节点（vnode），再决定复用、位移还是重建。
插入：仅在新增位置创建并挂载
当新 vnode 中存在旧 vnode 没有的节点时，触发插入操作。它不涉及已有节点的改动，而是直接调用 appendChild 或 insertBefore 将新创建的真实 DOM 节点插入指定位置。
- 插入前会检查父容器是否就绪，未挂载则延迟到父节点就绪后再执行
- 若插入的是带状态的元素（如
<input>），其初始值、焦点、滚动等由 vnode 的 props 和 children 决定，而非浏览器默认行为 - 在组件树中，插入也意味着触发子节点的
onEnter生命周期（如 Cocos2d-x）或mounted钩子（如 Vue）
移动：复用节点，物理重排位置
move 不是“逻辑上挪动”，而是真实 DOM 节点的位移——调用 insertBefore 把已存在的节点从原位置剪切，插入到新位置。它发生的前提是：
- 新旧 vnode 类型一致（比如都是
<div>） - 具有相同 key，且被 Diff 算法识别为“可复用”
- 处于子节点列表的“乱序区”，即顺序发生了变化但数量未变
这种操作避免了 remove + mount 带来的副作用：事件监听器不会丢失，<input> 光标位置、视频播放进度、CSS 动画帧等内部状态全部保留。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
删除：精准卸载，释放资源
删除发生在两种典型场景：
- 旧 vnode 存在、新 vnode 中无对应项 → 直接 removeChild 移除真实 DOM，并触发
unmount清理（如解绑事件、清除定时器、回收内存） - 新旧 vnode 类型不同（如
<div>→<span>）→ 先插入新节点，再删除旧节点，确保视觉连续性
在节点系统（如 Blender 几何节点或自定义 rendernode）中，“删除”还包含解除父子引用、清空子树缓存、标记数据为“未使用”等内存管理动作，而不仅是 DOM 层面的移除。
关键共性：都依赖 key 与类型匹配
无论插入、移动还是删除，渲染器都高度依赖 vnode 的 type 和 key 字段做决策：
- 没有 key 时，按索引顺序比对，容易误判导致不必要的移动或重建
- key 相同且 type 一致，才进入 move 或 patch 分支；否则走 replace 或 insert/delete 流程
- 像 Cocos2d-x 的
addChild、Blender 的引用副本、3ds Max 的 RenderElement 管理，也都沿用类似逻辑：通过 tag、name 或唯一 ID 标识节点身份，确保操作可追溯、可撤销
