# Vue3.0 数据响应机制解析 > 简单画了一张图片（请叫我灵魂画手，哈哈哈）从上面的图片其实大家就能看出，数据渲染解析分为两条路， 1. 通过节点的方式，然后根据指令，然后实例efect然后调用effect 2. 通过reactive，通过baseHandle然后进行依赖收集，广播触发 > 因为篇幅有限今天主要分享的是data => reactive => effect这条路径 ## 代码解析 ### reactive > 1. 可以跟大家说一下我一般情况是如何进行源代码阅读的，首先你先要对阅读的源代码实现的功能有所了解，然后对于这个功能的实现你的思路是什么，然后带着你的思路去源码中寻找作者的实现思路，在阅读的过程中对比自己的想法，弥补自己的不足。 > 2. 最开始阅读的时候，我们要先了解我们要阅读的源码的整体结构，工程配置，然后通过项目的根文件（一般是**index.js**）进行阅读，寻找到自己最熟悉的或者最想了解的功能模块，进行代码阅读。 > 3. 另外一个比较重要的点可能是，源码在实现过程中代码写的比较抽象，所以我们最开始阅读的时候大可不必全部了解细节，知道函数作用、变量用途就可以了，对整体实现流程缕通顺后在进行细节的阅读。 > 4. 为什么阅读源码对程序员有帮助，在我看来，我们在阅读的过程中一方面是了解作者的实现思路，另外一方面是学习代码的抽象能力，提升自己的代码质量。 1. 首先我们看**reactive.ts**中的reactive方法做了什么 ```js export function reactive(target: object) { // if trying to observe a readonly proxy, return the readonly version. if (readonlyToRaw.has(target)) { return target } // target is explicitly marked as readonly by user if (readonlyValues.has(target)) { return readonly(target) } return createReactiveObject( target, rawToReactive, reactiveToRaw, mutableHandlers, mutableCollectionHandlers ) } ``` 去掉上面的两个if判断其实这个方法就做了一件事情就是调用了**createReactiveObject**这个方法 ```js function createReactiveObject( target: unknown, toProxy: WeakMap, toRaw: WeakMap, baseHandlers: ProxyHandler, collectionHandlers: ProxyHandler ) { // 如果target 不是对象 if (!isObject(target)) { if (__DEV__) { console.warn(`value cannot be made reactive: ${String(target)}`) } return target } // target already has corresponding Proxy // 如果target 已经存在在相应的代理中则返回 let observed = toProxy.get(target) // 不为undefined 时返回observed if (observed !== void 0) { return observed } // target is already a Proxy // 如果target已经在代理中同样返回 if (toRaw.has(target)) { return target } // only a whitelist of value types can be observed. // 如果target并不能被observe 则返回 if (!canObserve(target)) { return target } // 如果collectionTypes继承于target，handlers为collectionHandlers // 不存在的话handlers为baseHandlers const handlers = collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers // 创建一个Proxy对象 observed = new Proxy(target, handlers) toProxy.set(target, observed) toRaw.set(observed, target) if (!targetMap.has(target)) { targetMap.set(target, new Map()) } return observed } ``` 上面的代码我进行了一些简单的注释，同样我们把if判断中带有return的部分忽略掉不看的话，其实这个方法的代码实现的功能就非常明了了 ```js function createReactiveObject( target: unknown, toProxy: WeakMap, toRaw: WeakMap, baseHandlers: ProxyHandler, collectionHandlers: ProxyHandler ) { // target already has corresponding Proxy // 如果target 已经存在在相应的代理中则返回 let observed = toProxy.get(target) // 如果collectionTypes继承于target，handlers为collectionHandlers // 不存在的话handlers为baseHandlers const handlers = collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers // 创建一个Proxy对象 observed = new Proxy(target, handlers) toProxy.set(target, observed) toRaw.set(observed, target) if (!targetMap.has(target)) { targetMap.set(target, new Map()) } return observed } ``` 我们在看上面简化的这段代码，实际上就是使用**ES6中的Proxy**，相信大家对于Vue2.0的响应式是通过**Object.defineProperty**来实现的，兼容主流浏览器和IE9已上的IE浏览器，能够监听数据对象的变化，但是**监听不到对象属性的增删、数组元素和长度的变化**，同时会在vue初始化的时候把**所有的Observer**都建立好，才能观察到数据对象属性的变化。这次3.0使用的ES6的Proxy可以做到监听对象属性的增删和数组元素和长度的修改，还可以监听**Map、Set、WeakSet、WeakMap**，同时还实现了惰性的监听，不会在初始化的时候创建所有的Observer，而是会在用到的时候才去监听。因此性能方面肯定是极大的提升！当然因为Proxy存在兼容性问题，所以3.0会对IE系列做兼容，对外api保持一致，底层通过Object.defineProperty实现。 ### baseHandle 通过上面的代码我们再来看Proxy中的handler是什么，**const handlers = collectionTypes.has(target.constructor) ? collectionHandlers : baseHandler**，这里做了一下判断如果当前传入的target被初始化过，那么使用传入collectionHandlers,如果没有被初始化过那么使用传入的baseHandler。那么我们回顾一下最开始我们提供的第一个代码块中createReactiveObject的入参分别都是什么： ```js return createReactiveObject( target, rawToReactive, reactiveToRaw, mutableHandlers, mutableCollectionHandlers ) ``` 我们首先去看baseHandler(mutableHandlers)做了哪些操作： ```js export const mutableHandlers: ProxyHandler