核心目标是用最少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>） <li>具有相同 key，且被 Diff 算法识别为“可复用”</li> <li>处于子节点列表的“乱序区”，即顺序发生了变化但数量未变</li> <p>这种操作避免了 remove + mount 带来的副作用：事件监听器不会丢失，<code><input> 光标位置、视频播放进度、CSS 动画帧等内部状态全部保留。
  

  vue-component-analyzer

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

  下载

  删除：精准卸载，释放资源

  删除发生在两种典型场景：

  • 旧 vnode 存在、新 vnode 中无对应项 → 直接 removeChild 移除真实 DOM，并触发 unmount 清理（如解绑事件、清除定时器、回收内存）
  • 新旧 vnode 类型不同（如 <div> → <code><span></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 标识节点身份，确保操作可追溯、可撤销