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 2Vue 3实现Object.definePropertyProxy新增属性❌ 不响应✅数组hack✅性能慢快✅ 3️⃣ ref 和 reactive 的区别？对比refreactive类型基本类型对象访问.value直接实现RefImplProxy二、编译原理（高频）✅ 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/div2️⃣ 输出模板 AST（Template AST）{type:NodeTypes.ELEMENT,tag:'div',props:[{type:NodeTypes.ATTRIBUTE,name:'id',value:'app'}],children:[{