欢迎光临建站系统网站,我们的服务范围是一键建站,公司建站等。

建站系统

一个高端新的网络集成营销平台

Vue3源码解读--响应式原理2(reactive)

作者:jcmp      发布时间:2021-04-18      浏览量:0
上一篇写了effect模块的实现以及一些

上一篇写了effect模块的实现以及一些细节,这一篇来写写响应式系统的另一部分--reactive模块。 emsp;首先来说说Proxy和defineProperty的区别,在我看来,一个是劫持操作,一个是劫持属性,Proxy只需要代理了一个对象的set,get操作,那么就相当于对这个对象所有的子属性做了劫持;而defineProperty需要针对每一个属性,需要对对象上的每个属性做遍历然后劫持。 因此,在2.x里,Vue需要对data数据做递归遍历,对data数据做深度的Observer处理,因此如果传入的data是一个层级较深的,或者上面有很多没用到的数据,都会影响vue初始化的速度。 而3.x,只需在对象上做一层代理,而这个对象上就算有很多无需做响应式处理的数据也没关系,因为子对象是否需要被递归代理是在用到的时候才决定的,这段逻辑在代理数据的getter里面,如下:

// 以下是对get操作的代理(简化版,删掉了其他的代码)function createGetter(isReadonly = false, shallow = false) { return function get(target: object, key: string | symbol, receiver: object) { // 获取子属性未经代理的值 const res = Reflect.get(target, key, receiver) track(target, TrackOpTypes.GET, key) // 如果子属性是一个对象,就递归代理子属性 return isObject(res) ? reactive(res) : res }}

因此相比2.x,基本上可以说没有了initData这一部分的时间。 Proxy代理了setter,getter之后,对于数组就可以直接修改属性了,而对象也无需在通过 this.$set 方法添加新的属性。而数组/对象上的很多方法,比如,slice/concat/fill/keys之类的,都是响应式的,因为这些方法对数组/对象的读取,操作,也都会被代理。不像2.x,数组只支持重写的7个方法。 另外要说的是,Proxy也不是万能的,3.x对响应式数据的支持不只数组和对象,还新增了4种数据类型(Set,Map,WeakSet,WeakMap),在js中,Proxy对于这4种集合的代理无能为力。(WeakSet和WeakMap不可被代理好理解,但是Set和Map为什么不可被代理就不懂了,希望有人能不吝赐教。)因此对于Map和Set的处理,是和2.x中对于数组的处理是一样的,劫持具体的方法,因此Set和Map只能支持被劫持的方法。 我觉得reactive相关部分的逻辑比较简单,因此就没有大段的注释代码了,相关的代码可以查看源码中 packages/reactivity/src/reactive.ts 。 响应式系统核心的两块就写完了,下一篇打算写一下响应式系统在源码中的应用之一,computed API。