女装店网站源码wordpress找回密码页面

女装店网站源码,wordpress找回密码页面,上海自聊自做网站,山东建设厅官方网站孙松青要搞懂Vue3的响应式原理#xff0c;咱们先抛开专业术语#xff0c;用奶茶店接单的生活化例子打底#xff0c;再拆解核心逻辑#xff0c;最后用简单代码模拟#xff0c;保证一看就懂。 核心目标#xff1a;数据变#xff0c;页面/逻辑自动更 Vue3响应式的本质就是#x…要搞懂Vue3的响应式原理咱们先抛开专业术语用奶茶店接单的生活化例子打底再拆解核心逻辑最后用简单代码模拟保证一看就懂。核心目标数据变页面/逻辑自动更Vue3响应式的本质就是当你修改数据时所有用到这个数据的地方比如页面显示、计算属性、watch会自动更新。就像奶茶店顾客数据点了「珍珠奶茶」数据值后厨页面/计算属性要按这个要求备料顾客改要求改数据为「芋圆奶茶」后厨不用你喊自动换料自动更新。第一步给数据装「管家」—— Proxy代理Vue3之所以能“感知”数据变化核心是给数据套了一层「代理Proxy」这个代理就像奶茶店的前台管家不管是“看数据”读还是“改数据”写都必须经过它。对比Vue2为啥换ProxyVue2用的是Object.defineProperty只能监听对象的已有属性比如改数组下标arr[0] 1监听不到给对象加新属性obj.newKey 1监听不到。而Proxy是“全方位监听”能覆盖对象/数组的所有操作新增、删除、改下标都能感知。通俗理解Proxy假设你有个数据constdata{toppings:珍珠}给它套上Proxy后就像这样// 管家ProxyconstproxyDatanewProxy(data,{// 读数据时触发比如页面渲染用data.toppingsget(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用三层容器存依赖咱们简化理解targetMapWeakMap→ 存「响应式对象」对应的依赖表 └ depsMapMap→ 存「对象属性」对应的依赖集合 └ depSet→ 存「用到这个属性的所有副作用函数」副作用函数凡是用到响应式数据的函数比如页面渲染函数、effect、watch回调执行它会产生“副作用”比如改变页面。用Set是为了避免重复比如同一个数据在页面用了两次只需要更新一次。第三步数据变了喊「依赖」更新—— 触发更新当你改数据时管家的set触发管家会翻订单本找到所有用到这个数据的依赖挨个通知它们“数据变了快更”——就像顾客改配料管家喊后厨“A和B的订单都换成芋圆”。完整流程奶茶店版初始化给{ toppings: 珍珠 }套上Proxy管家首次渲染页面要显示{{ toppings }}读toppings→ 管家触发get→ 把“页面渲染函数”记到toppings的依赖集合里修改数据改toppings 芋圆→ 管家触发set→ 找到依赖集合里的“页面渲染函数” → 执行函数 → 页面更新为“芋圆”。补充Ref是干啥的Proxy只能代理对象/数组没法代理字符串、数字等基本类型比如let age 18。所以Vue3搞了ref把基本类型包成「带value属性的对象」再代理这个对象的value属性。constageref(18);// 实际是 { value: 18 }age.value20;// 改value才会触发更新模板里不用写.value是因为Vue自动帮你“解包”了比如div{{ age }}/div。用代码模拟Vue3响应式核心下面的代码去掉了Vue3的复杂逻辑只保留核心能直观看到“收集依赖→触发更新”的过程// 1. 存储依赖的容器targetMap → depsMap → depconsttargetMapnewWeakMap();// 2. 收集依赖track追踪functiontrack(target,key){// 找当前对象的依赖表letdepsMaptargetMap.get(target);if(!depsMap){depsMapnewMap();targetMap.set(target,depsMap);}// 找当前属性的依赖集合letdepdepsMap.get(key);if(!dep){depnewSet();// Set避免重复依赖depsMap.set(key,dep);}// 把当前的副作用函数加入依赖dep.add(activeEffect);}// 3. 触发依赖trigger触发functiontrigger(target,key){constdepsMaptargetMap.get(target);if(!depsMap)return;constdepdepsMap.get(key);if(dep){// 执行所有依赖的副作用函数dep.forEach(effecteffect());}}// 4. 全局变量当前正在执行的副作用函数letactiveEffect;// 5. 注册副作用函数比如页面渲染、watchfunctioneffect(fn){activeEffectfn;fn();// 执行一次触发track收集依赖activeEffectnull;}// 6. 模拟reactive创建响应式对象functionreactive(target){returnnewProxy(target,{get(target,key){constresReflect.get(target,key);track(target,key);// 读数据时收集依赖returnres;},set(target,key,value){constresReflect.set(target,key,value);trigger(target,key);// 改数据时触发更新returnres;}});}// 测试模拟页面渲染constdatareactive({toppings:珍珠});// 注册副作用函数模拟页面渲染effect((){console.log(页面更新奶茶配料data.toppings);});// 改数据触发更新data.toppings芋圆;// 打印页面更新奶茶配料芋圆data.toppings椰果;// 打印页面更新奶茶配料椰果关键总结Vue3响应式的核心就3步代理拦截用Proxy包裹数据拦截读get和写set收集依赖读数据时get把用到数据的副作用函数记下来触发更新改数据时set执行所有记下来的副作用函数。额外补充reactive处理对象/数组默认深响应嵌套对象也能监听ref处理基本类型本质是代理{ value: 原值 }shallowReactive/shallowRef浅响应只监听第一层属性WeakMap依赖容器用它是为了内存友好数据销毁后自动回收依赖不泄漏。