上一篇写了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。
网友评论