一、响应式系统（必考）

✅ 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 响应式区别？

✅ 3️⃣ ref 和 reactive 的区别？

二、编译原理（高频）

✅ 4️⃣ Vue 3 编译流程？

template ↓ parse → AST ↓ transform（PatchFlag / Hoist） ↓ codegen → render 函数

下面按整体 → 关键阶段 → 核心产物 → 与 Vue 2 的差异来系统讲一下Vue 3 的编译流程。
（以模板编译为主，顺带提到单文件组件 SFC）

一、整体概览

Vue 3 的编译流程可以分为两大块：

1. 模板编译（Template Compilation）
   • 将template编译为渲染函数（render function）
2. SFC 编译（Single File Component）
   • 将.vue文件拆解为：
     • template
     • script
     • style
   • 再分别处理

✅ 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:[{