实现vue3 readonly 操作

最新推荐文章于 2024-05-28 11:44:38 发布

wx479

最新推荐文章于 2024-05-28 11:44:38 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wx479/article/details/120999546

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

//主入口函数
const readonlyMap = new WeakMap();

const objectToString = Object.prototype.toString;

const readonlyGet =  createGetter(true);

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
                    ? shallow
                        ? shallowReadonlyMap
                        : readonlyMap
                    : shallow
                        ? shallowReactiveMap
                        : reactiveMap).get(target)) {
            return target;
        }
        const targetIsArray = isArray(target);
        if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
            return Reflect.get(arrayInstrumentations, key, receiver);
        }
        const res = Reflect.get(target, key, receiver);
        if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
            return res;
        }
        if (!isReadonly) {
            track(target, "get" /* GET */, key);
        }
        if (shallow) {
            return res;
        }
        if (isRef(res)) {
            // ref unwrapping - does not apply for Array + integer key.
            const shouldUnwrap = !targetIsArray || !isIntegerKey(key);
            return shouldUnwrap ? res.value : res;
        }
        if (isObject(res)) {
            // Convert returned value into a proxy as well. we do the isObject check
            // here to avoid invalid value warning. Also need to lazy access readonly
            // and reactive here to avoid circular dependency.
            return isReadonly ? readonly(res) : reactive(res);
        }
        return res;
    };
}
const readonlyHandlers = {
    get: readonlyGet,

    //下面两个函数只要被执行，就会弹出报错，所以我们只需要重点看第一个get函数
    set(target, key) {
        {
            console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target);
        }
        return true;
    },
    deleteProperty(target, key) {
        {
            console.warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target);
        }
        return true;
    }
};

//主入口函数
function readonly(target) {
    return createReactiveObject(target, true, readonlyHandlers, readonlyMap);
}
//类型判断函数

const isObject = (val) => val !== null && typeof val === 'object';
const isArray = Array.isArray;
const isSymbol = (val) => typeof val === 'symbol'; 

function createReactiveObject(target, isReadonly, baseHandlers, proxyMap) {
    //传入isReadonly 值为true,判断传入的值是否为除Null 以外的Object对象，如果不是的话就会弹出错误,
    if (!isObject(target)) {
        {
            console.warn(`value cannot be made reactive: ${String(target)}`);
        }
        return target;
    }
    // target is already a Proxy, return it.
    // exception: calling readonly() on a reactive object
    // 这些条件都满足的话说明传入的已经是一个reactive对象了 ，直接return 返回即可
    if (target["__v_raw" /* RAW */] &&!(isReadonly && target["__v_isReactive" /* IS_REACTIVE */])) {
        return target;
    }
    
    // 初始化时proxyMap 为空 
    console.log(proxyMap,'proxymap')    //WeakMap { <items unknown> } proxymap 
    const existingProxy = proxyMap.get(target);   //获取到的值为undefined 
    if (existingProxy) {
        return existingProxy;
    }
    // only a whitelist of value types can be observed.
    const targetType = getTargetType(target);
    if (targetType === 0 /* INVALID */) {
        return target;
    }
    console.log(targetType,'targetType')
    const proxy = new Proxy(target, baseHandlers);
    proxyMap.set(target, proxy);
    return proxy;
}

function getTargetType(value) {
    return value["__v_skip" /* SKIP */] || !Object.isExtensible(value)
        ? 0 /* INVALID */
        : targetTypeMap(toRawType(value));
}
function targetTypeMap(rawType) {
    switch (rawType) {
        case 'Object':
        case 'Array':
            return 1 /* COMMON */;
        case 'Map':
        case 'Set':
        case 'WeakMap':
        case 'WeakSet':
            return 2 /* COLLECTION */;
        default:
            return 0 /* INVALID */;
    }
}
const toRawType = (value) => {
    // extract "RawType" from strings like "[object RawType]"
    return toTypeString(value).slice(8, -1);
};
const toTypeString = (value) => objectToString.call(value);

var result = readonly({a:2})
console.log(result)

控制台输出

//主入口函数

const readonlyMap = new WeakMap();

const readonlyCollectionHandlers = {

    get: createInstrumentationGetter(true, false)

};

function createInstrumentationGetter(isReadonly, shallow) {

    const instrumentations = shallow

        ? isReadonly

            ? shallowReadonlyInstrumentations

            : shallowInstrumentations

        : isReadonly

            ? readonlyInstrumentations

            : mutableInstrumentations;

    return (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 */) {

            return target;

        }

        return Reflect.get(hasOwn(instrumentations, key) && key in target

            ? instrumentations

            : target, key, receiver);

    };

}

const readonlyGet =  createGetter(true);



function createGetter(isReadonly = false, shallow = false) {

    //问题,proxy实现拦截

    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

                    ? shallow

                        ? shallowReadonlyMap

                        : readonlyMap

                    : shallow

                        ? shallowReactiveMap

                        : reactiveMap).get(target)) {

            return target;

        }

        const targetIsArray = isArray(target);

        if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {

            return Reflect.get(arrayInstrumentations, key, receiver);

        }

        const res = Reflect.get(target, key, receiver);

        if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {

            return res;

        }

        if (!isReadonly) {

            track(target, "get" /* GET */, key);

        }

        if (shallow) {

            return res;

        }

        if (isRef(res)) {

            // ref unwrapping - does not apply for Array + integer key.

            const shouldUnwrap = !targetIsArray || !isIntegerKey(key);

            return shouldUnwrap ? res.value : res;

        }

        if (isObject(res)) {

            // Convert returned value into a proxy as well. we do the isObject check

            // here to avoid invalid value warning. Also need to lazy access readonly

            // and reactive here to avoid circular dependency.

            return isReadonly ? readonly(res) : reactive(res);

        }

        return res;

    };

}

const readonlyHandlers = {

    get: readonlyGet,



    //下面两个函数只要被执行，就会弹出报错，所以我们只需要重点看第一个get函数

    set(target, key) {

        {

            console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target);

        }

        return true;

    },

    deleteProperty(target, key) {

        {

            console.warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target);

        }

        return true;

    }

};



//主入口函数

function readonly(target) {

    return createReactiveObject(target, true, readonlyHandlers, readonlyCollectionHandlers, readonlyMap);

}

//类型判断函数



const isObject = (val) => val !== null && typeof val === 'object';

const isArray = Array.isArray;

const isSymbol = (val) => typeof val === 'symbol';





function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) {

    //传入isReadonly 值为true,判断传入的值是否为除Null 以外的Object对象，如果不是的话就会弹出错误,

    if (!isObject(target)) {

        {

            console.warn(`value cannot be made reactive: ${String(target)}`);

        }

        return target;

    }

    // target is already a Proxy, return it.

    // exception: calling readonly() on a reactive object

    // 这些条件都满足的话说明传入的已经是一个reactive对象了 ，直接return 返回即可

    if (target["__v_raw" /* RAW */] &&!(isReadonly && target["__v_isReactive" /* IS_REACTIVE */])) {

        return target;

    }

   

    // 初始化时proxyMap 为空



    const existingProxy = proxyMap.get(target);

    if (existingProxy) {

        return existingProxy;

    }

    // only a whitelist of value types can be observed.



    //

    const targetType = getTargetType(target);   //判断传入的数据类型，如果是Object类型数据 返回值一般为1

    if (targetType === 0 /* INVALID */) {

        这里是因为数据类型不满足要求，所以直接把数据返回了出去

        return target;

    }



    //这里一般调用传入的handlers是 baseHandlers  这里调用的传入的是readonlyHandlers 所以转到这个readonlyHandlers继续阅读

    const proxy = new Proxy(target, targetType === 2 /* COLLECTION */ ? collectionHandlers : baseHandlers);

    proxyMap.set(target, proxy);

    return proxy;

}



const objectToString = Object.prototype.toString;

function getTargetType(value) {

    //初始化的时候值为false 返回的三元表达式后半部分调用了targetTypeMap()函数,传入了另一个函数toRawType()并且给它传入value

    //值

    return value["__v_skip" /* SKIP */] || !Object.isExtensible(value)    

        ? 0 /* INVALID */

        : targetTypeMap(toRawType(value));

}

function targetTypeMap(rawType) {

    //这里进行判断 如果是传入的类型是'Object'和'Array' 返回1

    //传入数据类型 为 'Map' ,'Set','WeakSet' ,'WeakMap' 返回2

    //其他的数据类型返回为 0

  switch (rawType) {

      case 'Object':

      case 'Array':

          return 1 /* COMMON */;

      case 'Map':

      case 'Set':

      case 'WeakMap':

      case 'WeakSet':

          return 2 /* COLLECTION */;

      default:

          return 0 /* INVALID */;

  }

}

const toRawType = (value) => {

  // extract "RawType" from strings like "[object RawType]"

  //提取Object.prototype.string.call(value) 的数据类型

  return toTypeString(value).slice(8, -1);

};



const toTypeString = (value) => objectToString.call(value);

wx479

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现vue3 readonly 操作

//主入口函数const readonlyMap = new WeakMap();const objectToString = Object.prototype.toString;const readonlyGet = createGetter(true);function createGetter(isReadonly = false, shallow = false) { return function get(target, key, receiver) { .
复制链接

扫一扫