vue3 原理
一、响应式系统（必考）
✅ 1️⃣ Vue 3 响应式原理是什么？
答案：
Vue 3 使用Proxy + Reflect实现响应式。
constobj=newProxy(target,{get(target,key,receiver){track(target,key)returnReflect.get(target,key,receiver)},set(target,key,value,receiver){trigger(target,key)returnReflect.set(target,key,value,receiver)}})✅ 优点：
- 可监听新增 / 删除属性
- 支持 Map / Set
- 性能更好
✅ 2️⃣ Vue 2 和 Vue 3 响应式区别？
| 对比 | Vue 2 | Vue 3 |
|---|---|---|
| 实现 | Object.defineProperty | Proxy |
| 新增属性 | ❌ 不响应 | ✅ |
| 数组 | hack | ✅ |
| 性能 | 慢 | 快 |
✅ 3️⃣ ref 和 reactive 的区别？
| 对比 | ref | reactive |
|---|---|---|
| 类型 | 基本类型 | 对象 |
| 访问 | .value | 直接 |
| 实现 | RefImpl | Proxy |
二、编译原理（高频）
✅ 4️⃣ Vue 3 编译流程？
template ↓ parse → AST ↓ transform（PatchFlag / Hoist） ↓ codegen → render 函数下面按整体 → 关键阶段 → 核心产物 → 与 Vue 2 的差异来系统讲一下Vue 3 的编译流程。
（以模板编译为主，顺带提到单文件组件 SFC）
一、整体概览
Vue 3 的编译流程可以分为两大块：
- 模板编译（Template Compilation）
- 将
template编译为渲染函数（render function）
- 将
- SFC 编译（Single File Component）
- 将
.vue文件拆解为：templatescriptstyle
- 再分别处理
- 将
✅ Vue 3 的编译器被拆分为多个包，核心包是：
@vue/compiler-core@vue/compiler-dom（浏览器）@vue/compiler-ssr@vue/compiler-sfc
二、模板编译的整体流程（核心）
模板编译 =解析 → 转换 → 代码生成
template (HTML-like) ↓ AST（抽象语法树） ↓ transform（优化 & 指令处理） ↓ codegen ↓ render function（JS）三、阶段一：解析（Parser）
1️⃣ 输入
<divid="app"><p>{ { msg }}</p></div>2️⃣ 输出
模板 AST（Template AST）
{type:NodeTypes.ELEMENT,tag:'div',props:[{type:NodeTypes.ATTRIBUTE,name:'id',value:'app'}],children:[{