1. 模板编译
将模板字符串解析为 AST（抽象语法树）。
Vue底层原理源码深度解析
探索前端框架的核心引擎，从源码级别理解 Vue底层原理，掌握响应式数据流、虚拟DOM渲染及编译优化的奥秘。本文档旨在为高级前端开发者提供系统性的知识图谱。
核心模块架构解析
理解 Vue底层原理 的关键在于拆解其核心模块。Vue 作为一个渐进式框架，其核心由响应式系统、模板编译器、虚拟 DOM 渲染器和组件系统组成。这些模块协同工作，实现了声明式渲染和高效的用户界面更新。
响应式系统 (Reactivity)
数据驱动视图的核心。通过劫持数据的变化，自动触发视图更新。Vue 2 使用 Object.defineProperty，而 Vue 3 采用更强大的 Proxy。
模板编译器 (Compiler)
将模板字符串解析为抽象语法树（AST），再转换为渲染函数（Render Function）。包含静态提升、补丁标记等优化策略。
虚拟 DOM (Virtual DOM)
用 JavaScript 对象模拟 DOM 结构。通过 Diff 算法对比新旧 VNode，计算出最小化 DOM 操作，提升渲染性能。
响应式系统：数据驱动的基石
在 Vue底层原理 中，响应式系统是最复杂也最核心的部分。它负责追踪数据的变化，并通知视图进行更新。我们将通过选项卡对比 Vue 2 和 Vue 3 的实现差异。
Vue 2 响应式原理详解
Vue 2 使用 Object.defineProperty 来劫持数据的 getter 和 setter。当访问数据时，触发 getter 进行依赖收集；当修改数据时，触发 setter 通知依赖更新。
// Vue 2 核心响应式简化示例
function defineReactive(obj, key, val) {
const dep = new Dep(); // 依赖收集器
Object.defineProperty(obj, key, {
get() {
if (Dep.target) {
dep.addSub(Dep.target); // 依赖收集
}
return val;
},
set(newVal) {
if (newVal === val) return;
val = newVal;
dep.notify(); // 通知更新
}
});
}局限性： 无法检测对象属性的添加和删除，无法监听数组索引的变化（需要重写数组方法），且递归遍历所有属性导致初始化性能较差。
Vue 3 响应式原理详解
Vue 3 引入了 ES6 的 Proxy 对象，直接代理整个对象。它可以在对象被访问或修改时触发陷阱函数（traps），从而实现对数据变化的精确追踪。
// Vue 3 核心响应式简化示例
function reactive(obj) {
return new Proxy(obj, {
get(target, key, receiver) {
track(target, key); // 依赖收集
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
trigger(target, key); // 触发更新
return result;
}
});
}优势： 可以拦截对象属性的添加/删除，支持 Map、Set、WeakMap 等数据结构，且只在访问时递归代理（懒代理），性能显著优于 Vue 2。
? 网友们还关心：响应式相关热点
- 为什么 Vue 3 的
ref和reactive有区别？ - 如何解决 Vue 2 中数组索引赋值不更新视图的问题？
- Vue 响应式系统中的“依赖收集”是如何工作的？
Object.freeze对 Vue 响应式系统有什么影响？
虚拟 DOM 与 Diff 算法
虚拟 DOM 是 Vue底层原理 中用于抽象 DOM 操作的重要概念。它通过 JavaScript 对象描述 DOM 结构，通过 Diff 算法对比新旧虚拟 DOM 树，计算出最小的 DOM 操作集，从而批量更新真实 DOM。
Diff 算法核心策略
Vue 的 Diff 算法采用了双端比较（Two-Ends Comparison）策略，同时从头到尾和从尾到头比较新旧节点的子节点列表，以提高比较效率。
| 比较策略 | 描述 | 时间复杂度 |
|---|---|---|
| Key 比较 | 如果新旧节点 Key 相同，则认为可能是同一个节点，复用 DOM | O(1) |
| 同层比较 | 只比较同一层级的节点，不跨层级比较 | O(N) |
| 双端比较 | 同时从头尾两个方向比较子节点列表，处理移动节点 | O(N) |
虚拟 DOM 创建流程
2. 生成渲染函数
将 AST 转换为 Render 函数，返回 VNode 树。
3. 创建 VNode
执行 Render 函数，生成虚拟 DOM 节点树。
4. Diff 与 Patch
对比新旧 VNode，计算差异并更新真实 DOM。
编译优化：性能提升的关键
Vue 3 在编译阶段引入了多种优化策略，旨在减少运行时的开销。这些优化是 Vue底层原理 中不可或缺的一部分，直接影响了应用的性能表现。
主要优化策略
- 静态提升 (Static Hoisting)： 将模板中不变的节点提取出来，只创建一次，后续复用，避免重复创建和销毁。
- 补丁标记 (Patch Flags)： 在编译时为动态节点打上标记，Diff 算法在比较时可以快速跳过静态节点，只关注动态部分。
- 缓存事件处理函数 (Cache Handlers)： 对于内联事件处理函数，如果函数体没有变化，则缓存该函数，避免每次渲染都重新创建。
编译产物示例
// 编译后的渲染函数片段
with (this) {
return _c('div', {
attrs: { "id": "app" },
on: { "click": onClick } // 缓存的事件处理
}, [
_v("Hello " + _s(name)), // 动态文本
_c('span', { staticClass: 'static' }, [_v("Static")]) // 静态节点，会被提升
])
}❓ 常见问题解答 (FAQ)
以下是开发者在探索 Vue底层原理 时最常遇到的问题及深度解答。
Vue 2 和 Vue 3 在响应式原理上有什么区别？
Vue 2 使用 Object.defineProperty 实现响应式，存在无法检测对象属性的添加/删除以及数组索引变化的问题。Vue 3 使用 ES6 Proxy 重新定义了响应式系统，能够透明地拦截对象的所有操作，性能更好，支持 Map、Set 等数据结构。
Vue 的虚拟 DOM 为什么能提升性能？
虚拟 DOM 通过在 JavaScript 中构建一个轻量级的 DOM 树表示，当状态改变时，通过 Diff 算法计算出最小的 DOM 操作集合，然后批量更新真实 DOM，减少了直接操作 DOM 带来的浏览器重排和重绘开销。
什么是 Vue 的编译优化策略？
Vue 在编译阶段会进行静态提升（Static Hoisting）、补丁标志（Patch Flags）标记和缓存事件处理函数等优化。这使得在运行时 Diff 过程中可以跳过静态节点，只更新动态节点，极大提升了渲染性能。
如何阅读 Vue 源码？
建议从核心模块入手：首先是 reactivity 模块理解数据驱动，然后是 runtime-core 理解组件实例化和渲染流程，最后是 compiler-core 理解模板编译。结合浏览器调试工具和源码注释，逐步跟踪执行流。