[1]中我们详细的讲解了普通对象和数组实现响应式的原理,但是Proxy可以做的远不止于此,对于es6中新增的、、、也一样可以实现响应式的支持。MapSetWeakMapWeakSet 前言 在本系列的上一篇文章 带你彻底搞懂Vue3的响应式原理!TypeScript从零实现基于Proxy的响应式库。[1]中 我们详细的讲解了普通对象和数组实现响应式的...
所以对map在vue中响应式的总结如下: map 方法:返回一个新数组,不会改变原数组。 直接修改对象属性:如果你在 map 的回调中修改了对象的属性,这会影响原数组中的对象,因为你操作的是对象的引用。 因此,虽然 map 不会改变原数组,但在你的代码中,由于对对象属性的修改,原数组的内容会被改变。
// 真正交给Proxy第二个参数的handlers只有一个get// 把用户对于map的get、set这些api的访问全部移交给上面的劫持函数exportconstcollectionHandlers={get(target:Raw,key:Key,receiver:ReactiveProxy){// 返回上面被劫持的apitarget=hasOwnProperty.call(instrumentations,key)?instrumentations:targetreturnReflect.get(tar...
weakmap---顾名思义---弱引用,即weakmap的引用不会阻止垃圾回收。假如运行垃圾回收算法时,只有一个weakmap引用了一个对象,这个对象会被回收,并且weakmap对这个对象的引用也会被删除。weakMap经常被用于引用对象存在时才有价值的信息,就像这里的响应式树结构,一旦响应式对象被回收,其value所指向的depsMap也会被回收...
所以,响应式的 Map 会用 WeakMap 来保存,key 为原对象。 这个数据结构就是响应式的核心数据结构了。 比如这样的状态对象: constobj={a:1,b:2} 它的响应式数据结构就是这样的: constdepsMap=newMap();constaDeps=newSet();depsMap.set('a',aDeps);constbDeps=newSet();depsMap.set('b',bDeps);con...
所以,响应式的 Map 会用 WeakMap 来保存,key 为原对象。 这个数据结构就是响应式的核心数据结构了。 比如这样的状态对象: 代码语言:javascript 复制 constobj={a:1,b:2} 它的响应式数据结构就是这样的: 代码语言:javascript 复制 constdepsMap=newMap();constaDeps=newSet();depsMap.set('a',aDeps);cons...
vue中的map是响应式的。Vue追踪不到Set的变化，但是可以追踪到mySetChangeTracker的变化，所以当Set发生改变后，手动改变mySetChangeTracker的值就能让Vue知道我的数据发生了变化。在mySetAsList里面写入varx=this.mySetChangeTracker，这样一来当mySetChangeTracker更新后，mySetAsList就会做出响应。
本文就不再过多介绍 Vue2 中响应式的处理,感兴趣可以参考**从 vue 源码看问题 —— 如何理解 `Vue` 响应式?**[2] ,但是会有简单提及,下面就来看看 Vue3 中是如何处理原始值、Object、Array、Set、Map等数据类型的响应式。 从Object.defineProperty 到 Proxy ...
targetMap类型为WeakMap,存储的是响应式对象的依赖,也可以是普通的Map,但WeakMap不会影响到垃圾回收 如果target变得无法访问,可以被垃圾回收,那weakMap中对应的value也会被垃圾回收。 depsMap存储的是属性的依赖 dep存储的是一个effect集(Set)的依赖,这些effect集在响应式对象的值发生变化时重新运行 ...