constgetProto=<TextendsCollectionTypes>(v:T):any=>Reflect.getProrotypeOf(v)// 代理Map/WeakMap的get方法functionget(target:MapTypes,// 指向this,由于Map对象已经被代理,因此this为代理代理key:unknown,isReadonly=false,isShallow=false){/** * 1. 针对readonly(reactive(new Map()))的情况, * targe...
当reactive Map中的数据发生变化时(例如添加、修改或删除键值对),Vue能够自动检测到这些变化,并触发相应的视图更新。这是因为reactive函数使用了ES6的Proxy对象来拦截对Map对象的操作,并在这些操作发生时执行相应的响应逻辑。 需要注意的是,虽然reactive可以处理Map等复杂数据结构,但在实际开发中应谨慎使用,以避免不必要...
本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。 Map/WeakMap/Set/WeakSet的操作 由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本,这里我们只研究Map和Set即可。 Set的属性和方法 size: number为访问器属性(accessor property),返回Set对象中的值的个数 add(value: any...
但由于要处理readonly(reactive(new Map()))这一场景,添加了很多一时让人看不懂的代码而已。 constgetProto = <TextendsCollectionTypes>(v: T):any=>Reflect.getProrotypeOf(v)// 代理Map/WeakMap的get方法functionget(target: MapTypes,// 指向this,由于Map对象已经被代理,因此this为代理代理key: unknown,...
本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。 Map/WeakMap/Set/WeakSet的操作 由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本,这里我们只研究Map和Set即可。 Set的属性和方法 ...
reactive():定义响应式变量,仅支持对象、数组、Map、Set等集合类型有效。对String、number、boolean、等原始类型无效 1、使用前必需引入 reactive <script setup>import { reactive } from 'vue' </script> 2、定义语法: <script setup>import { reactive ...
代理缓存 -WeakMap 场景一续集 在vue3 中,上面打印结果是 true,原因是 v3 做了一个缓存机制,其实就是一个映射表 其中用到了 WeakMap 弱引用 // 缓存 const reactiveMap = new WeakMap() let existingProxy = reactiveMap.get(target) // 看一下这个对象是否被代理过 ...
3) mutableInstrumentations() 函数 -> Map Set等类型的 handlers 4. ref 1) createRef() 2) toReactive() 3)proxyRefs() 自动脱 ref 三、 结语 一、前言 距离Vue3出来了已经有一段时间了, 最近呢重温了一下Vue3的响应式方案,以及ref reactive的区别,相信你看完本文,也能对 Vue3响应式的了解有所提高...
reactiveMap ) } function shallowReactive(target) { return createReactiveObject( target, false, shallowReactiveHandlers, shallowCollectionHandlers, shallowReactiveMap ); } // readonly、shallowReadonly代码这里省略,区别在于传入的拦截器等参数不同 export const reactiveMap = new WeakMap<Target, any>() ...
IS_REACTIVE: '__v_isReactive'} const reactiveImpl = (target) => { if (!isObject(target)) { console.warn(`${target} need is object`)return } // 如果传递的是源对象，源对象被代理过后，直接返回代理后的对象 // 这个缓存是 当target是代理前对象时 const existingProxy = reactiveMap.get(...