Vue.js渲染机制本质是声明式映射系统：通过编译器将模板转为AST，优化标记静态节点，生成渲染函数；再由VNode树与patch算法协同，结合响应式系统实现DOM高效更新。
Vue.js 的渲染机制本质是一套“声明式映射”系统：你写模板或渲染函数，Vue 负责把它变成真实 DOM，并在数据变化时智能更新。它不直接操作 DOM，而是通过中间层——虚拟 DOM（VNode）——来协调视图与状态的一致性。
模板如何变成可执行的渲染函数
Vue 的 HTML 模板不会被浏览器原样解析，而是由编译器（compiler）在构建时或运行时处理。这个过程分三步：
-
解析（Parse）：把模板字符串（如
<div>{{ msg }}</div>）转成抽象语法树（AST），记录节点类型、属性、插值、指令等结构信息 - 优化（Optimize）：扫描 AST，标记出静态节点（内容和结构完全不依赖响应式数据的节点），这些节点后续更新中会被跳过，提升 diff 效率
-
生成（Codegen）：把优化后的 AST 转为 JavaScript 渲染函数代码，例如返回
h('div', [h('span', this.msg)])这类调用
渲染函数产出虚拟 DOM（VNode）
每次组件 render 执行，都会生成一棵 VNode 树。VNode 是轻量级 JS 对象，描述了“应该渲染什么”，比如：
{ type: 'div', props: { class: 'box' }, children: [ { type: 'p', children: 'Hello' } ] }
立即学习“前端免费学习笔记（深入）”；
它不含 DOM 操作逻辑，只声明结构、属性和子节点。同一组件在不同数据状态下会生成不同的 VNode 树，但结构一致、便于比对。
虚拟 DOM 如何变成真实 DOM
首次挂载时，Vue 调用 patch（也叫 mount）算法，递归遍历 VNode 树，用原生 DOM API 创建对应的真实节点并插入页面。关键点包括：
- 普通元素节点 →
document.createElement+setAttribute+appendChild - 文本节点 →
document.createTextNode - 组件节点 → 递归触发子组件的 render 和 patch 流程
- 指令（如
v-if、v-for）在渲染函数中已转化为条件逻辑或数组映射，不单独参与 patch
数据变化后如何高效更新
响应式系统检测到数据变更，触发组件重新 render，得到新的 VNode 树。Vue 不重刷整个 DOM，而是执行 diff 算法，逐层对比新旧 VNode：
- 先比根节点类型和 key —— 类型不同直接替换，key 不同则视为不同元素
- 再比 props（属性、事件、指令绑定等），有差异就调用
patchProp更新 - 子节点采用双端比较策略（尤其对
v-for列表），结合 key 快速定位移动、新增、删除项 - 静态节点跳过比对，复用首次挂载时创建的 DOM 引用
