vue3.0 reactive和shallowReact响应式源码实现

男娘i 2021-07-24 19:52 366阅读 0赞

shallowReact:
    	因为只实现第一层,所以直接new Proxy代理即可
    	
    reactive:
    	因为要实现深层次数据劫持,所以需要递归
    		递归注意情况:
    			当是普通值时,因为普通值所处的对象已经被Proxy代理,所以无需设置直接返回,
    			如果是数组:需要遍历出数组中的对象,使其变成响应式的
    			如果是对象:需要遍历出属性中的对象,使其变成响应式的

效果图:  
![在这里插入图片描述][20210410220309868.png]  
![在这里插入图片描述][20210410220328447.png]

代码示例:

//定义处理器
    const reactiveHandler = { 
      get(target,property) { 
        console.log('读取了'+property+"属性")
        const result = Reflect.get(target, property);
    
        return result;
      },
      set(target, property, value) { 
        console.log('设置了'+property+'属性')
        const result = Reflect.set(target, property, value);
        return result;
      },
      deleteProperty(target, property) { 
        console.log('删除了' + property + "属性");
        const res = Reflect.deleteProperty(target, property);
        return res;
      }
    }
    
    
    
    function shallowReactive(target) { 
      //判断目标对象类型
      if (target && typeof target === "object") { 
        return new Proxy(target,reactiveHandler)
      }
      //基本类型直接返回
      return target
    }
    
    
    
    const shallow = shallowReactive({  a: 'jeff',b:{ c:'tom'} });
    
    delete shallow.a
    
    function reactive(target) { 
      //判断目标对象类型
      if (target && typeof target === "object") { 
        if (Array.isArray(target)) {  //数组情况
          target.forEach((item, index) => {  //遍历数组,当数组元素是对象情况
            target[index] = reactive(item); //递归元素
          })
        } else {  //对象情况
          Object.keys(target).forEach((key) => { //遍历对象,当对象属性中还有对象
            target[key] = reactive(target[key]); //递归元素
          })
        }
    
        return new Proxy(target, reactiveHandler);
      }
      //基本类型直接返回,因为基本类型已被其所处对象代理
      return target;
    }
    
    const deep = reactive({  a: 1, b: {  c: 2 } });
    
    deep.a++;
    deep.b.c++;
    delete deep.b.c

[20210410220309868.png]: /images/20210724/ca0e1d2fdd134969b8e63d56fd8e4f83.png
[20210410220328447.png]: /images/20210724/3a6ec1aca9ea46528082703922dd31cb.png