当前位置：首页 > news >正文

彻底告别 `$set`：从“数字化餐厅”看 Vue3 响应式的全感知进化

news 2026/4/14 0:49:45

在前端面试的深水区，Vue3 的响应式系统是衡量一个开发者是否触及框架灵魂的试金石。很多人知道 Vue3 用了Proxy代替了Object.defineProperty，但其背后的底层代差和调度艺术，远不止“支持数组”那么简单。

今天，我们把 Vue3 响应式系统搬进一间“数字化智慧餐厅”，带你深度拆解其底层的进化逻辑。

一、角色分配：响应式系统的“数字化”图谱

为了方便理解，我们将源码中的抽象概念对应到餐厅的各个角色中：

源码概念	餐厅角色	职责描述
Proxy (代理)	智能电子菜单/平板	顾客（代码）看菜、点菜、改单都要经过它，它能感知一切。
Track (依赖收集)	点餐意向登记	记录哪个桌号（Effect）关注了哪道菜（Key）。
Trigger (触发更新)	出餐广播/后厨通知	某道菜变动了，按登记表通知对应的桌号。
Scheduler (调度器)	传菜升降梯	即使后厨瞬间出了10道菜，也先放进梯子，等攒够了/忙完了再统一送餐。

二、维度打击：为什么 Proxy 是“降维打击”？

1. 从“纸质表单”到“多点触控屏”

Vue2 的Object.defineProperty就像是纸质表单。

局限：你必须预先在表单上印好“菜名”方格。如果你想在空白处加个“备注”（新增属性），或者抹掉一个菜（删除属性），扫描仪（Vue2）是感知不到的，因为它的监控点是死板且固定的。
代价：这导致 Vue2 初始化时必须递归遍历对象所有属性。如果菜单有 1000 道菜，开门加载速度会极慢。

2. 惰性监听（Lazy Conversion）

Vue3 的 Proxy 是按需服务。
当你没看某道嵌套很深的菜时，Proxy 根本不会去理它。只有当你指着那道菜问“这个多少钱？”（访问属性）时，Proxy 才会即时对该层级进行响应式转换。这种“用到才代理”的策略，让 Vue3 在处理海量数据时，首屏启动速度远超 Vue2。

三、深度解析：Proxy 的 13 种拦截“传感器”

Proxy 不仅仅能监听get和set，它布满了 13 种传感器，实现了**从“属性劫持”到“全行为代理”**的跃迁。

get / set(基础交互)：最基本的查看和修改。
has(in操作符)：当代码执行'price' in dish时，Vue3 能感知到你的查询意图。
deleteProperty(delete)：当你删掉一个属性，Vue3 立即触发更新，不再需要手动打补丁。
ownKeys(遍历 -Object.keys)：当你在看“今日推荐列表”时，Vue3 记下了你对“整个列表结构”的依赖。

代码演示：如何感知遍历？

// Vue3 内部模型简述constdish=reactive({name:'红烧肉',price:58});// 副作用函数：关注了菜单的“所有键名”effect(()=>{console.log("菜单更新了：",Object.keys(dish));});// 当我们新增一个属性（Vue2 做不到，Vue3 通过 set 拦截并触发 ownKeys 依赖）dish.category='热菜';// 自动触发打印：菜单更新了：['name', 'price', 'category']

四、核心闭环：Track 追踪与 Trigger 触发

Vue3 内部通过一套严密的内存映射表（targetMap）来管理成千上万的“点餐需求”。

1. Track (依赖收集)

当effect执行并读取数据时，触发 Proxy 的get，调用track。

内存模型：WeakMap<target, Map<key, Set<effect>>>
意图：它在后台记下：“1号桌（Effect）看中了‘红烧肉’（Key）”。

2. Trigger (触发更新)

当数据被修改时，触发 Proxy 的set，调用trigger。

意图：它翻开记录本，找到所有关注“红烧肉”的桌号，依次通知他们执行更新。

// 极简实现参考functiontrack(target,key){letdepsMap=targetMap.get(target);if(!depsMap)targetMap.set(target,(depsMap=newMap()));letdep=depsMap.get(key);if(!dep)depsMap.set(key,(dep=newSet()));dep.add(activeEffect);// 登记当前正在运行的“桌号”}functiontrigger(target,key){constdepsMap=targetMap.get(target);if(!depsMap)return;constdep=depsMap.get(key);dep.forEach(effect=>{if(effect.scheduler)effect.scheduler();// 如果有调度器，走调度流程elseeffect.run();// 否则直接更新});}