Vue渲染机制是数据驱动→虚拟节点比对→差异打补丁的闭环过程：响应式数据变更触发渲染函数生成新VNode，patch函数对比新旧VNode，sameVnode判断决定复用或重建，patchVnode更新属性或子节点，静态节点跳过diff。
Vue 渲染机制的核心，是响应式状态变化触发重新渲染，再通过补丁（patch）逻辑精准更新真实 DOM。它不是“全量重绘”，而是“数据驱动 → 虚拟节点比对 → 差异打补丁”的闭环过程。
响应式状态如何触发渲染
当 ref 或 reactive 数据被修改时，Vue 的响应式系统会立即通知其依赖的副作用（Effect）——其中最关键的，就是组件的渲染函数。
- 渲染函数执行后生成新的 VNode（虚拟 DOM 节点），它描述了当前 UI 应该长什么样
- 这个新 VNode 不会直接操作 DOM，而是交给 patch 函数与上一次的旧 VNode 对比
- 只有真正被模板读取（get）的字段才会建立依赖；解构、未初始化属性、数组索引直赋等写法会切断依赖链，导致不更新或误更新
补丁逻辑从哪开始执行
patch 的入口固定在组件更新流程中：vm._update(vm._render(), hydrating)。其中 _render() 产出新 VNode，_update() 调用 vm.__patch__(prevVnode, vnode) 启动比对。
- 首次挂载：prevVnode 为 null，直接走 createElm 创建整棵 DOM 树
- 后续更新：进入 diff 主干，先判断是否可复用节点（sameVnode），再决定是 patchVnode 还是整体替换
- 卸载场景：vnode 为空时调用 removeVnodes，清理 DOM、事件监听器和指令绑定
sameVnode 判断决定更新粒度
两个 VNode 是否能就地复用，取决于五个条件同时成立：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 标签名（tag）相同
- 是否为注释节点（isComment）一致
- key 值存在且相等（key !== undefined）
- 是否为同一构造器或异步工厂组件
- data 属性存在性一致（都为 null 或都不为 null）
任一不满足，Vue 就放弃复用，销毁旧节点并新建 —— 这是避免 DOM 错位、状态混乱的关键防线。
patchVnode 与子节点更新细节
当 sameVnode 为 true 后，进入 patchVnode，它分三步处理：
- 更新元素属性、class、样式、事件监听器等，调用对应模块钩子（如 updateAttrs、updateClass）
- 若新旧节点都是文本节点（vnode.text !== undefined），直接设置 el.textContent
- 若存在子节点，则调用 updateChildren —— Vue 的双端 diff 算法在此运行，高效比对并移动/复用/新增/删除子 VNode
静态节点（v-if 中的常量内容、v-memo 匹配成功块）会被跳过 diff，直接复用 DOM 或 innerHTML 插入，进一步减少开销。
