Vue模板经编译器解析为AST、优化标记静态节点、生成渲染函数，返回VNode；数据响应式变化触发re-render，新旧VNode通过patch高效比对更新DOM。
编译器：把模板转成渲染函数
Vue 的模板（比如 <div>{{ msg }}</div>）不是直接运行的，得先过编译器这一关。编译器分三步：解析（parse）→ 优化（optimize）→ 生成（generate）。解析阶段把模板字符串变成抽象语法树（AST），优化阶段标记静态节点（比如不带响应式的文本或元素），生成阶段把 AST 转成可执行的 JavaScript 渲染函数（render）。这个函数返回虚拟 DOM 节点（VNode），是后续更新的输入基础。
响应式系统触发更新：数据变 → 触发 re-render
当响应式数据变化时（比如 this.msg = 'hello'），会触发对应依赖的 watcher。组件级的 Watcher 会调用 updateComponent，本质就是重新执行 vm._render()，也就是调用上面编译生成的 render 函数，产出一棵新的虚拟 DOM 树。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
虚拟 DOM 对比（patch）：高效更新真实 DOM
新旧两棵 VNode 树会进入 patch 过程（也叫 diff）。Vue 2 使用双端对比 + key 驱动的同层比对策略，优先复用节点、避免不必要的创建销毁；Vue 3 则升级为更细粒度的动态节点标记（block tree）+ 静态提升 + 预设 patch flag，大幅提升 diff 效率。关键点在于：只比对可能变化的节点，跳过静态内容；key 是列表渲染正确性的核心依据；diff 是深度优先、同层比较，不会跨层级移动节点。
实际开发中容易被忽略的关键细节
- 模板编译发生在构建时（Vue CLI / Vite）或首次实例化（runtime-only vs runtime-compiler），线上环境推荐用预编译好的 render 函数，减少运行时开销
-
响应式更新是异步的，
nextTick就是等本次批量更新的 patch 完成后再执行回调，DOM 真正更新完才触发 - 函数式组件没有状态和响应式系统，它直接接收 props 返回 VNode，适合做纯展示、高复用的 UI 片段
-
v-if 和 v-show 的根本区别在 VNode 层：前者控制是否生成该节点（影响 AST 结构），后者只是加/删
display: none
