本文已参与「新人创作礼」活动，一起开启掘金创作之路。 > 本文基于`Vue 3.2.30`版本源码进行分析 > > 为了增加可读性，会对源码进行删减、调整顺序、改变的操作，文中所有源码均可视作为伪代码 > > 由于ts版本代码携带参数过多，大部分伪代码会采取js的形式展示，而不是原来的ts代码 > 本文重点关注依赖收集和派发更新的流程，为了简化流程，会以`Object`为基础分析响应式的流程，不会拘泥于数据类型不同导致的依赖收集和派发更新逻辑不同 # 本文内容 * `Proxy`和`Reflect`的介绍 * 整体依赖收集的流程图以及针对流程图的相关源码分析 * 整体派发更新的流程图以及针对流程图的相关源码分析 * `ReactiveEffect`核心类的相关源码分析和流程图展示 * `computed`的相关分析，分为流程图和针对流程图的相关源码分析 * `watch`和`watchEffect`的初始化源码分析，包括各种配置参数以及`schedule` * `watch`和`watchEffect`依赖收集和派发更新流程图展示 > 每一个点都有配套的流程图，源码分析是为流程图服务，结合流程图看源码分析效果更佳 # 前置知识在[Vue2源码-响应式原理浅析](https://juejin.cn/post/7179389498860503099)的文章分析中，我们知道`Vue2`使用的是`Object.defineProperty`的方式，而在`Vue3`中使用`Proxy`进行代替数据的响应式劫持，下面将简单介绍`Vue3`中所使用的`Proxy`和`Reflect` ## Proxy介绍 > 摘录于[Proxy - JavaScript | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy) `Proxy` 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。 > Proxy只能代理对象，不能代理非对象值，比如String、Number、String、undefined、null等原始值 ### 基础语法 ```javascript // handler还有其它方法，下面示例只摘取Vue3中比较常用的5个方法 const handler = { get(target: Target, key: string | symbol, receiver: object) { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { }, deleteProperty() { }, has() { }, ownKeys() { } } const p = new Proxy(target, handler); ``` ### 参数 #### target 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理） #### handler 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为 ## Reflect的介绍 > 摘录于[Reflect - JavaScript | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect) `Reflect` 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与[proxy handlers(en-US)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy)的方法相同。 ### 常用方法的语法 ```javascript Reflect.set(target: object, propertyKey: PropertyKey, value: any, receiver?: any): boolean; Reflect.get(target: object, propertyKey: PropertyKey, receiver?: any): any; ``` ### 在Vue3中的作用 #### Reflect的一些方法等价于Object方法的效果 `Reflect`在`Vue3`中用来代替对象的一些方法操作，如下面代码所示，直接访问`obj.xxx`与`Reflect.get(obj, "xxx", obj)`的效果是一样的，唯一不同点是`Reflect`的第三个参数，当与`Proxy`一起使用时，`receiver`是代理`target`的对象 ```javascript const obj = {count: 1} const temp = obj.count; // 1 // 上面代码等价于下面的代码 const temp1 = Reflect.get(obj, "count", obj); // 1 ``` #### Reflect的一些方法具有操作的返回值，而Object具备同等效果的方法没有返回值 `Reflect.set()`：如果在对象上成功设置了属性，则[Reflect.set()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/set)返回true，否则返回false。如果目标不是Object，则抛出TypeError
`Reflect.get()`：[Reflect.get()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/get)返回属性的值。如果目标不是Object，则抛出TypeError
`Reflect.deleteProperty()`：如果属性从对象中删除，则[Reflect.deleteProperty()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty)返回true，否则返回false #### 改变特殊原始对象的`this`指针问题从下面的代码可以知道，当有一些`原始Object`存在`this`指针时，如果没有使用`Reflect`处理`this`对象时，会导致`effect()`无法正常收集依赖的情况
比如下面的代码块，我们理想中的状态是`p1.count1`->`get count1()`->`return this.count`->打印出`9999`，但是实际打印的确是`22`，此时的`get count1() {}`的`this`指向`obj`，而不是`p1` ```javascript const obj = { count: 22, get count1() { console.log("count1") // 此时的this指向obj，而不是p return this.count; } } const p = new Proxy(obj, { get(target, key, receiver) { // target: 原始对象，此时为obj // key: 触发的key // receiver: proxy对象，此时为p return target[key]; } }); const p1 = { __proto__: p, count: 9999 } console.log(p1.count1); // 22 ``` 因此我们可以建立下面的代码块，理想中，我们在`effect`中打印出`p.count1`，理想情况下，当`p.count`改变时，我们希望`effect`重新执行，输出最新的`p.count1`也就是`p.count`的值。但是实际上什么都没有发生，因为`console.log(p.count1)`并不会触发`p.count`的依赖收集，因为下面代码中实际访问的是`obj.count`，而不是`p.count`，没有依赖收集，`p.count`自然也不会有派发更新通知`effect`重新执行 ```javascript const obj = { count: 22, get count1() { console.log("count1") // 此时的this指向obj，而不是p return this.count; } } const p = new Proxy(obj, { get(target, key, receiver) { // target: 原始对象，此时为obj // key: 触发的key // receiver: proxy对象，此时为p return target[key]; } }); effect(()=> { // 从上面p1的例子可以看出 // 此时的count1中的this指向obj，会导致p.count无法收集该effect，导致p.count更新时无法通知到effect重新执行 console.log(p.count1);//22 }); onMounted(()=> { p.count = 66666; // 不会触发上面的effect重新执行 }); ``` 当使用了`Reflect`之后，我们就可以使用`receiver`参数明确调用主体，把代理对象`p`当作`this`的主体，防止很多意外可能性发生（如下面的代码） ```javascript const obj = { count: 22, get count1() { return this.count; } } const p = new Proxy(obj, { get(target, key, receiver) { // target: 原始对象，此时为obj // key: 触发的key // receiver: proxy对象，此时为p return Reflect.get(target, key, receiver); } }); const p1 = { __proto__: p, count: 9999 } console.log(p1.count); // 9999 ``` # 依赖收集 ## 流程图 > 由于掘金限制，只能使用png图片，由于本文源码分析都是基于流程图，如果下面的png图片看不清，可以点击查看清晰的svg图片[Vue3依赖收集.svg](https://wbccb.github.io/Frontend-Articles/image/Vue3依赖收集.svg) ![Vue3依赖收集.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/23013ce66e2d4474bf427e2d017488cc~tplv-k3u1fbpfcp-watermark.image#?w=3520\&h=2845\&s=1193674\&e=png\&b=fff6f5) ## 基本流程使用`Proxy`进行`target`对象的代理初始化，由上面前置知识可知，`proxy`会劫持`target`的多个方法，下面代码中使用`mutableHandlers`为`Proxy`的`handler`方法 ```javascript // packages/reactivity/src/reactive.ts function reactive(target: object) { // if trying to observe a readonly proxy, return the readonly version. if (isReadonly(target)) { return target } return createReactiveObject( target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap ) } function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) { //......一系列的处理，包括判断target是否已经是Proxy，target是不是对象，已经有proxyMap缓存等等 const proxy = new Proxy( target, // TargetType.COLLECTION = Map/Set/WeakMap/WeakSet targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers ) return proxy } ``` 从下面代码可以看出，`Object`类型最终依赖收集的核心方法是`track()`方法 > 如果res=target\[key]仍然是Object，则继续调用reactive()方法进行包裹，因此reactive(Object)中Object的所有key，包括深层的key都具备响应式 > 最终createGetter()返回的是原始值(Number/String等)或者是一个Proxy(包裹了Object)类型的值 ```javascript // packages/reactivity/src/baseHandlers.ts const mutableHandlers: ProxyHandler