vue3响应式模块的实现 efffect reactive ref...

简易版的reactive的实现

• 实现对对象的代理
• 一个对象只会代理一次，多次代理返回的是同一个对象
• 对已经是代理对象的对象进行代理，返回值还是代理对象本身
• 利用的就是代理对象在取值时会触发get钩子，我们只需要在代理对象触发get钩子的时候，直接返回代理对象即可。
• 此时还没有实现对象属性的二次代理，如果属性值是对象，不会创建代理对象

 import { isObject } from "@vue/shared";
 ​
 /*
  * @Author: 毛毛
  * @Date: 2022-06-25 13:50:54
  * @Last Modified by: 毛毛
  * @Last Modified time: 2022-06-25 14:15:28
  */
 // 缓存已经代理过后的响应式对象
 const reactiveMap = new WeakMap();
 ​
 const enum ReactiveFlags {
   IS_REACTIVE = "__v_isReactive",
 }
 /**
  * 代理对象为响应式
  * @param obj
  */
 export function reactive(target: unknown) {
   if (!isObject(target)) return;
   const existingProxy = reactiveMap.get(target);
   // 目标对象被代理过 返回同一个代理
   if (existingProxy) return existingProxy;
   // 第一个普通对象 创建代理
   // 如果传入的对象 是已经被代理过的对象 我们可以看看这个对象是否有get方法，有表示已经是代理对象
   if (target[ReactiveFlags.IS_REACTIVE]) {
     // TODO 取到true 就返回自身 源码这一步很妙
     return target;
 }
   // 创建代理对象
   const proxy = new Proxy(target, {
     get(target, key, receiver) {
       // 用来判断是否是响应式对象
       // 对象没有被代理之前，没有该key，如果代理对象被用来二次代理，会在上面取值，然后get走到这里，返回true了
       if (key === ReactiveFlags.IS_REACTIVE) {
         return true;
     }
       return Reflect.get(target, key, receiver);
   },
     set(target, key, value, receiver) {
       const flag = Reflect.set(target, key, value, receiver);
       return flag;
   },
 });
   // 已经代理的对象进行缓存 如果再次代理同一个对象 返回同一个代理
   reactiveMap.set(target, proxy);
   return proxy;
 } 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

当然这样写会有点乱，我们可以把对目标对象的代理操作提取出来：

baseHandler.ts:

 /*
  * @Author: 毛毛
  * @Date: 2022-06-25 14:22:33
  * @Last Modified by: 毛毛
  * @Last Modified time: 2022-06-25 14:25:24
  */
 ​
 export const enum ReactiveFlags {
   IS_REACTIVE = "__v_isReactive",
 }
 export const mutableHandlers = {
   get(target, key, receiver) {
     // 用来判断是否是响应式对象
     // 对象没有被代理之前，没有该key，如果代理对象被用来二次代理，会在上面取值，然后get走到这里，返回true了
     if (key === ReactiveFlags.IS_REACTIVE) {
       return true;
   }
     return Reflect.get(target, key, receiver);
 },
   set(target, key, value, receiver) {
     const flag = Reflect.set(target, key, value, receiver);
     return flag;
 },
 } as ProxyHandler