reactive.ts文件vue3中实现数据响应式的一个核心库。下面我将对它里面封装的一些方法进行解读。

1、toRaw

  该方法返回响应式对象原来的对象。在toRaw方法中获取observed["__v_raw"]属性触发observed对象的setter钩子函数，然后返回observed的被代理对象。

//本质上是一个递归函数，通过查找响应式对象上额"__v_raw"属性来返回目标对象
function toRaw(observed) {
    return ((observed && toRaw(observed["__v_raw" /* RAW */])) || observed);
}
//proxy中的getter钩子函数
function createGetter(isReadonly = false, shallow = false) {
    return function get(target, key, receiver) {
        if (key === "__v_isReactive" /* IS_REACTIVE */) {
            return !isReadonly;
        }
        else if (key === "__v_isReadonly" /* IS_READONLY */) {
            return isReadonly;
        }
        else if (key === "__v_raw" /* RAW */ &&
            receiver === (isReadonly ? readonlyMap : reactiveMap).get(target)) {
            return target;
        }
        ...
    };
}

//demo
const target={
    name: "james",
    age: 23,
    arr: [1, 2, 3]
}
const state = reactive(target)
const foo=ref({
    name:"james"
})
console.log(toRaw(state)===target);//true