// 真正交给Proxy第二个参数的handlers只有一个get// 把用户对于map的get、set这些api的访问全部移交给上面的劫持函数export const collectionHandlers = {get(target: Raw, key: Key, receiver: ReactiveProxy) {// 返回上面被劫持的apitarget = hasOwnProperty.call(instrumentations, key)? instrumentations: tar...
// 真正交给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 --- Map --- Set 的数据结构。 WeakMap 的 key 是原对象,value 是响应式的 Map。这样当对象销毁的时候,对应的 Map 也会销毁。 Map 的 key 就是对象的每个属性,value 是依赖这个对象属性的 effect 函数的集合 Set。 然后用 Proxy 代理对象的 get 方法,收集依赖该对象...
响应式系统的核心就是一个 WeakMap --- Map --- Set 的数据结构。 WeakMap 的 key 是原对象,value 是响应式的 Map。这样当对象销毁的时候,对应的 Map 也会销毁。 Map 的 key 就是对象的每个属性,value 是依赖这个对象属性的 effect 函数的集合 Set。 然后用 Proxy 代理对象的 get 方法,收集依赖该对象...
本文就不再过多介绍 Vue2 中响应式的处理,感兴趣可以参考**从 vue 源码看问题 —— 如何理解 `Vue` 响应式?**[2] ,但是会有简单提及,下面就来看看 Vue3 中是如何处理原始值、Object、Array、Set、Map等数据类型的响应式。 从Object.defineProperty 到 Proxy ...
本文基于Vue 3.2.30版本源码进行分析为了增加可读性,会对源码进行删减、调整顺序、改变部分分支条件的操作,文中所有源码均可视作为伪代码由于ts版本代码携...
本文就不再过多介绍Vue2中响应式的处理,感兴趣可以参考从 vue 源码看问题 —— 如何理解 Vue 响应式?,但是会有简单提及,下面就来看看Vue3中是如何处理原始值、Object、Array、Set、Map等数据类型的响应式。 1ACBCFF0.jpg 从Object.defineProperty到Proxy ...
Map 与WeakMap的区别 响应式数据以及副作用函数 响应式系统基本实现 依赖收集 派发更新 依赖清理 支持嵌套 实现执行调度 实现computed 实现watch TDD 测试驱动开发 重构 vitest 的使用 如何使用ChatGPT编写单元测试 excalidraw 画图工具 代码地址: https://github.com/SuY...
本文就不再过多介绍Vue2中响应式的处理,感兴趣可以参考从 vue 源码看问题 —— 如何理解Vue响应式?,但是会有简单提及,下面就来看看Vue3中是如何处理原始值、Object、Array、Set、Map等数据类型的响应式。 从Object.defineProperty到Proxy 一切的一切还得从Object.defineProperty开始讲起,那是一个不一样的API… ...