【vue】通俗易懂的剖析vue3的响应式原理-平芜编程栈

要搞懂Vue3的响应式原理，咱们先抛开专业术语，用奶茶店接单的生活化例子打底，再拆解核心逻辑，最后用简单代码模拟，保证一看就懂。

核心目标：数据变，页面/逻辑自动更

Vue3响应式的本质就是：当你修改数据时，所有用到这个数据的地方（比如页面显示、计算属性、watch）会自动更新。

就像奶茶店：

顾客（数据）点了「珍珠奶茶」（数据值）；
后厨（页面/计算属性）要按这个要求备料；
顾客改要求（改数据）为「芋圆奶茶」，后厨不用你喊，自动换料（自动更新）。

第一步：给数据装「管家」—— Proxy代理

Vue3之所以能“感知”数据变化，核心是给数据套了一层「代理（Proxy）」，这个代理就像奶茶店的前台管家：不管是“看数据”（读）还是“改数据”（写），都必须经过它。

对比Vue2（为啥换Proxy？）

Vue2用的是Object.defineProperty，只能监听对象的已有属性，比如：

改数组下标（arr[0] = 1）监听不到；
给对象加新属性（obj.newKey = 1）监听不到。

而Proxy是“全方位监听”，能覆盖对象/数组的所有操作（新增、删除、改下标都能感知）。

通俗理解Proxy

假设你有个数据：

constdata={toppings:'珍珠'}

给它套上Proxy后，就像这样：

// 管家（Proxy）constproxyData=newProxy(data,{// 读数据时触发（比如页面渲染用data.toppings）get(target,key){console.log('有人看了',key,'的值');returntarget[key];// 把值返回},// 改数据时触发（比如data.toppings = '芋圆'）set(target,key,value){console.log('有人改了',key,'的值，新值是',value);target[key]=value;// 把新值存进去returntrue;}});

此时你操作proxyData.toppings，管家都会立刻知道：

console.log(proxyData.toppings);// 打印：有人看了 toppings 的值 → 珍珠proxyData.toppings='芋圆';// 打印：有人改了 toppings 的值，新值是 芋圆

第二步：记下来「谁用到了数据」—— 依赖收集

管家知道了“谁看/改数据”还不够，得记下来：哪些地方用到了这个数据（比如页面渲染、计算属性），这些“地方”就是「依赖」。

依赖收集的时机

只有当「读数据」时（比如页面首次渲染、计算属性执行），管家才会收集依赖——就像顾客点单时，管家把“顾客A要珍珠奶茶”记在订单本上。

依赖存哪？（简单版容器）

Vue3用三层容器存依赖，咱们简化理解：

targetMap（WeakMap）→ 存「响应式对象」对应的依赖表 └ depsMap（Map）→ 存「对象属性」对应的依赖集合 └ dep（Set）→ 存「用到这个属性的所有副作用函数」

副作用函数：凡是用到响应式数据的函数（比如页面渲染函数、effect、watch回调），执行它会产生“副作用”（比如改变页面）。
用Set是为了避免重复：比如同一个数据在页面用了两次，只需要更新一次。

第三步：数据变了，喊「依赖」更新—— 触发更新

当你改数据时（管家的set触发），管家会翻订单本，找到所有用到这个数据的依赖，挨个通知它们“数据变了，快更！”——就像顾客改配料，管家喊后厨：“A和B的订单都换成芋圆！”。

完整流程（奶茶店版）

初始化：给{ toppings: '珍珠' }套上Proxy管家；
首次渲染：页面要显示{{ toppings }}，读toppings→ 管家触发get→ 把“页面渲染函数”记到toppings的依赖集合里；
修改数据：改toppings = '芋圆'→ 管家触发set→ 找到依赖集合里的“页面渲染函数” → 执行函数 → 页面更新为“芋圆”。

补充：Ref是干啥的？

Proxy只能代理对象/数组，没法代理字符串、数字等基本类型（比如let age = 18）。

所以Vue3搞了ref：把基本类型包成「带value属性的对象」，再代理这个对象的value属性。

constage=ref(18);// 实际是 { value: 18 }age.value=20;// 改value才会触发更新

模板里不用写.value，是因为Vue自动帮你“解包”了（比如<div>{{ age }}</div>）。

用代码模拟Vue3响应式核心

下面的代码去掉了Vue3的复杂逻辑，只保留核心，能直观看到“收集依赖→触发更新”的过程：

// 1. 存储依赖的容器：targetMap → depsMap → depconsttargetMap=newWeakMap();// 2. 收集依赖（track：追踪）functiontrack(target,key){// 找当前对象的依赖表letdepsMap=targetMap.get(target);if(!depsMap){depsMap=newMap();targetMap.set(target,depsMap);}// 找当前属性的依赖集合letdep=depsMap.get(key);if(!dep){dep=newSet();// Set避免重复依赖depsMap.set(key,dep);}// 把当前的副作用函数加入依赖dep.add(activeEffect);}// 3. 触发依赖（trigger：触发）functiontrigger(target,key){constdepsMap=targetMap.get(target);if(!depsMap)return;constdep=depsMap.get(key);if(dep){// 执行所有依赖的副作用函数dep.forEach(effect=>effect());}}// 4. 全局变量：当前正在执行的副作用函数letactiveEffect;// 5. 注册副作用函数（比如页面渲染、watch）functioneffect(fn){activeEffect=fn;fn();// 执行一次，触发track收集依赖activeEffect=null;}// 6. 模拟reactive：创建响应式对象functionreactive(target){returnnewProxy(target,{get(target,key){constres=Reflect.get(target,key);track(target,key);// 读数据时收集依赖returnres;},set(target,key,value){constres=Reflect.set(target,key,value);trigger(target,key);// 改数据时触发更新returnres;}});}// 测试：模拟页面渲染constdata=reactive({toppings:'珍珠'});// 注册副作用函数（模拟页面渲染）effect(()=>{console.log('页面更新：奶茶配料='+data.toppings);});// 改数据，触发更新data.toppings='芋圆';// 打印：页面更新：奶茶配料=芋圆data.toppings='椰果';// 打印：页面更新：奶茶配料=椰果