vue3 之 reactive && toRefs源码解析

一、 reactve

1. 定义

reactive API的定义为传入一个对象返回一个基于原对象的响应式代理，即返回一个proxy，相当于Vue2.x中的Vue.Observer。

2. 优点

   在Vue2.x中数据的响应式处理是基于Object.defindProperty()的，但他只会侦听对象的属性，不会侦听对象，在添加对象属性的时候需要：

   Vue.$set(object, 'name', 'lock li')
   

   reactiveAPI则是基于ES2015 proxy实现了对对象的响应式处理，在vue3.0中往对象中添加属性，并且这个属性也会具有响应式的效果：

   object.name = 'lock li'
   

3. 注意点

   ① 使用reactiveAPI时，setup中返回的reactive需要通过对象的形式：

   export default definComponent({
       name: 'example',
       setup(props) {
           const obj = reactive({foo: 'bar'})
           
           return {
               obj
           }
       }
   })
   

   defineComponent

   definComponent主要是用来帮助Vue在TS下正确推断出setup()组件的参数类型

   export function defineComponent(options: unknown) {
       return isFunction(options) ? { setup: options } : options
   }
   

② 或者借助toRefsAPI包裹一下导出，（使用toRefs包裹导出的我们可以使用展开运算符或解构接收）：

export default defineComponent({
    setup() {
        let obj = { foo: 'bar' }
        obj = toRefs(obj)
        return {
            ...obj
        }
    }
})

二、源码实现

function reactive(target) {
    // 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);
    }
    if (isRef(target)) {
        return target;
    }
    return createReactiveObject(target, rawToReactive, reactiveToRaw, mutableHandlers, mutableCollectionHandlers);
}

可以看到先有3个判断逻辑，对readonlyToRaw、readonlyValues、isRef分别进行了判断，先不看这些判断逻辑，通常我们对reactive()传入一个对象，可以直接命中createReactiveObject()。

createReactiveObject()函数如下：

function createReactiveObject(target, toProxy, toRaw, baseHandlers, collectionHandlers) {
    if (!isObject(target)) {
        if ((process.env.NODE_ENV !== 'production')) {
            console.warn(`value cannot be made reactive: ${String(target)}`);
        }
        return target;
    }
    // target already has corresponding Proxy
    let observed = toProxy.get(target);
    if (observed !== void 0) {
        return observed;
    }
    // target is already a Proxy
    if (toRaw.has(target)) {
        return target;
    }
    // only a whitelist of value types can be observed.
    if (!canObserve(target)) {
        return target;
    }
    const handlers = collectionTypes.has(target.constructor)
        ? collectionHandlers
        : baseHandlers;
    observed = new Proxy(target, handlers);
    toProxy.set(target, observed);
    toRaw.set(observed, target);
    return observed;
}

createReactiveObject()传入了4个参数，分别是：

target：我们定义reactive时传入的对象

toProxy：一个空的WeakSet

toRaw：判断传入的reactive是否已经被代理

baseHandlers：一个已经被定义好的的具有get和set的对象，它看起来会是这样子：

const baseHandlers = {
 get(target, key, value, receiver) {},
 set(target, key, value, receiver) {},
 deleteProxy(target, key) {},
 has(target, key) {},
 ownKey(target) {}
}

• collectionHandlers是一个只包含get的对象。

详细看createReactiveObject函数，一些分支逻辑先不用管，我们直接看最后的逻辑：

const handlers = collectionTypes.has(target.constructor)
        ? collectionHandlers
        : baseHandlers;
    observed = new Proxy(target, handlers);
    toProxy.set(target, observed);
    toRaw.set(observed, target);
    return observed;

首先判断collectionTypes中是否包含我们传入的target的构造函数（构造器），而collectionTypes是一个Set集合主要包含：Set Map WeakSet WeakMap 等4种集合的构造函数。

如果collectionTypes 中包含我们传入的构造函数，则将handlers赋值为仅包含get属性的collectionHanders 否则 赋值为baseHandlers。

两者的区别在于collectionHandlers仅含有get属性，是用来留给不需要派发更新的变量使用的，例如我们常用的props属性

然后将target handlers作为两个参数传入，使用替换了vue 2.x中的Object.defineProperty的Proxy代理函数，并实例化

接下来两步也非常重要，将target和observed 作为键值对赋值到toProxy，用于下次检测传入的target是否已经被代理，并返回被代理的observed对象：

// target already has corresponding Proxy
let observed = toProxy.get(target);
if (observed !== void 0) {
    return observed;
}

将observed和target作为键值对赋值到toRaw，用于下次检测传入的target是否是一个代理对象，并返回代这个target：

// target is already a Proxy
if (toRaw.has(target)) {
    return target;
}

二、toRefs

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref ，和响应式对象 property 一一对应。

使用toRefs其实是为了方便我们使用解构和展开运算符，具体代码：

function toRefs(object) {
    if ((process.env.NODE_ENV !== 'production') && !isReactive(object)) {
        console.warn(`toRefs() expects a reactive object but received a plain one.`);
    }
    const ret = {};
    for (const key in object) {
        ret[key] = toProxyRef(object, key);
    }
    return ret;
}
function toProxyRef(object, key) {
    return {
        _isRef: true,
        get value() {
            return object[key];
        },
        set value(newVal) {
            object[key] = newVal;
        }
    };
}

可以看到toRefs是在原有Proxy的基础上，返回了一个所有属性带有get 、set 的对象，这样就解决了Proxy对象遇到解构和展开运算符之后，失去响应性的问题。