<script setup>
import {reactive} from 'vue'
const data = reactive({ //定義對(duì)象
  name:'測(cè)試',
  age:10
})
const num = reactive(1)//定義基本數(shù)據(jù)類(lèi)型
console.log(data)//便于定位到調(diào)試位置
</script>
<template>
<div>
<h1>{{ data.name }}</h1>
</div>
</template>
<style scoped></style>

/*1.初始進(jìn)來(lái)函數(shù)，判斷目標(biāo)對(duì)象target是否為只讀對(duì)象，如果是直接返回*/
function reactive(target) {
    // if trying to observe a readonly proxy, return the readonly version.
    if (isReadonly(target)) {
        return target;
    }
    //創(chuàng)建一個(gè)reactive對(duì)象，五個(gè)參數(shù)后續(xù)會(huì)講解
    return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
}
/*2.判斷是來(lái)判斷target是否為只讀。*/
function isReadonly(value) {
    return !!(value && value["__v_isReadonly" /* ReactiveFlags.IS_READONLY */]);
}
/*3.創(chuàng)建一個(gè)reactive對(duì)象*/
/*createReactiveObject接收五個(gè)參數(shù)：
target被代理的對(duì)象，
isReadonl是不是只讀的，
baseHandlers proxy的捕獲器，
collectionHandlers針對(duì)集合的proxy捕獲器，
proxyMap一個(gè)用于緩存proxy的`WeakMap`對(duì)象*/
function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) {
//如果target不是對(duì)象則提示并返回
/*這里會(huì)跳轉(zhuǎn)到如下方法
判斷是否原始值是否為object類(lèi)型 
const isObject = (val) => val !== null && typeof val === 'object';
*/
    if (!isObject(target)) {
        if ((process.env.NODE_ENV !== 'production')) {
            console.warn(`value cannot be made reactive: ${String(target)}`);
        }
        return target;
    }
    // 如果target已經(jīng)是proxy是代理對(duì)象則直接返回.
    if (target["__v_raw" /* ReactiveFlags.RAW */] &&
        !(isReadonly && target["__v_isReactive" /* ReactiveFlags.IS_REACTIVE */])) {
        return target;
    }
    // 從proxyMap中獲取緩存的proxy對(duì)象，如果存在的話(huà)，直接返回proxyMap中對(duì)應(yīng)的proxy。否則創(chuàng)建proxy。
    const existingProxy = proxyMap.get(target);
    if (existingProxy) {
        return existingProxy;
    }
    // 并不是任何對(duì)象都可以被proxy所代理。這里會(huì)通過(guò)getTargetType方法來(lái)進(jìn)行判斷。
    const targetType = getTargetType(target);
    //當(dāng)類(lèi)型值判斷出是不能代理的類(lèi)型則直接返回
    if (targetType === 0 /* TargetType.INVALID */) {
        return target;
    }
    //通過(guò)使用Proxy函數(shù)劫持target對(duì)象，返回的結(jié)果即為響應(yīng)式對(duì)象了。這里的處理函數(shù)會(huì)根據(jù)target對(duì)象不同而不同(這兩個(gè)函數(shù)都是參數(shù)傳入的)：
    //Object或者Array的處理函數(shù)是collectionHandlers;
    //Map,Set,WeakMap,WeakSet的處理函數(shù)是baseHandlers;
    const proxy = new Proxy(target, targetType === 2 /* TargetType.COLLECTION */ ? collectionHandlers : baseHandlers);
    proxyMap.set(target, proxy);
    return proxy;
}

//1.進(jìn)入判斷如果value有__v_skip屬性且為true或?qū)ο笫强赏卣箘t返回0，否則走類(lèi)型判斷函數(shù)
function getTargetType(value) {
//Object.isExtensible() 方法判斷一個(gè)對(duì)象是否是可擴(kuò)展的（是否可以在它上面添加新的屬性）。
    return value["__v_skip" /* ReactiveFlags.SKIP */] || !Object.isExtensible(value)
        ? 0 /* TargetType.INVALID */
        : targetTypeMap(toRawType(value));
}
//2.這里通過(guò)Object.prototype.toString.call(obj)來(lái)判斷數(shù)據(jù)類(lèi)型
const toRawType = (value) => {
    // extract "RawType" from strings like "[object RawType]"
    return toTypeString(value).slice(8, -1);
};
const toTypeString = (value) => objectToString.call(value);
//3.這里rawType是為'Object'所以會(huì)返回1
function targetTypeMap(rawType) {
    switch (rawType) {
        case 'Object':
        case 'Array':
            return 1 /* TargetType.COMMON */;
        case 'Map':
        case 'Set':
        case 'WeakMap':
        case 'WeakSet':
            return 2 /* TargetType.COLLECTION */;
        default:
            return 0 /* TargetType.INVALID */;//返回0說(shuō)明除前面的類(lèi)型外其他都不能被代理，如Date，RegExp，Promise等
    }
}

const mutableHandlers = {
    get,// 獲取值的攔截，訪(fǎng)問(wèn)對(duì)象時(shí)會(huì)觸發(fā)
    set,// 更新值的攔截，設(shè)置對(duì)象屬性會(huì)觸發(fā)
    deleteProperty,// 刪除攔截，刪除對(duì)象屬性會(huì)觸發(fā)
    has,// 綁定訪(fǎng)問(wèn)對(duì)象時(shí)會(huì)攔截，in操作符會(huì)觸發(fā)
    ownKeys// 獲取屬性key列表
};
function deleteProperty(target, key) {
    // key是否是target自身的屬性
    const hadKey = hasOwn(target, key);
    // 舊值
    const oldValue = target[key];
    // 調(diào)用Reflect.deleteProperty從target上刪除屬性
    const result = Reflect.deleteProperty(target, key);
    // 如果刪除成功并且target自身有key，則觸發(fā)依賴(lài)
    if (result && hadKey) {
        trigger(target, "delete" /* TriggerOpTypes.DELETE */, key, undefined, oldValue);
    }
    return result;
}
//
function has(target, key) {
    //檢查目標(biāo)對(duì)象是否存在此屬性。
    const result = Reflect.has(target, key);
    // key不是symbol類(lèi)型或不是symbol的內(nèi)置屬性，進(jìn)行依賴(lài)收集
    if (!isSymbol(key) || !builtInSymbols.has(key)) {
        track(target, "has" /* TrackOpTypes.HAS */, key);
    }
    return result;
}
/*ownKeys可以攔截以下操作:
1.Object.keys()
2.Object.getOwnPropertyNames()
3.Object.getOwnPropertySymbols()
4.Reflect.ownKeys()操作*/
function ownKeys(target) {
    track(target, "iterate" /* TrackOpTypes.ITERATE */, isArray(target) ? 'length' : ITERATE_KEY);
    return Reflect.ownKeys(target);
}

const get = /*#__PURE__*/ createGetter();
/*傳遞兩個(gè)參數(shù)默認(rèn)都為false
isReadonly是否為只讀
shallow是否轉(zhuǎn)換為淺層響應(yīng)，即Reactive---> shallowReactive，shallowReactive監(jiān)聽(tīng)了第一層屬性的值，一旦發(fā)生改變，則更新視圖;其他層，雖然值發(fā)生了改變，但是視圖不會(huì)進(jìn)行更新
*/
function createGetter(isReadonly = false, shallow = false) {
    return function get(target, key, receiver) {
    //1.是否已被reactive相關(guān)api處理過(guò)；
        if (key === "__v_isReactive" /* ReactiveFlags.IS_REACTIVE */) {
            return !isReadonly;
        }
     //2.是否被readonly相關(guān)api處理過(guò)
        else if (key === "__v_isReadonly" /* ReactiveFlags.IS_READONLY */) {
            return isReadonly;
        }
        else if (key === "__v_isShallow" /* ReactiveFlags.IS_SHALLOW */) {
            return shallow;
        }
      //3.檢測(cè)__v_raw屬性
        else if (key === "__v_raw" /* ReactiveFlags.RAW */ &&
            receiver ===
                (isReadonly
                    ? shallow
                        ? shallowReadonlyMap
                        : readonlyMap
                    : shallow
                        ? shallowReactiveMap
                        : reactiveMap).get(target)) {
            return target;
        }
      //4.如果target是數(shù)組，且命中了一些屬性，則執(zhí)行函數(shù)方法
        const targetIsArray = isArray(target);
        if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
            return Reflect.get(arrayInstrumentations, key, receiver);
        }
      //5.Reflect獲取值
        const res = Reflect.get(target, key, receiver);
      //6.判斷是否為特殊的屬性值
        if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
            return res;
        }
        if (!isReadonly) {
            track(target, "get" /* TrackOpTypes.GET */, key);
        }
        if (shallow) {
            return res;
        }
      //7.判斷是否為ref對(duì)象
        if (isRef(res)) {
            // ref unwrapping - skip unwrap for Array + integer key.
            return targetIsArray && isIntegerKey(key) ? res : res.value;
        }
      //8.判斷是否為對(duì)象
        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 set = /*#__PURE__*/ createSetter();
  //shallow是否轉(zhuǎn)換為淺層響應(yīng)，默認(rèn)為false
function createSetter(shallow = false) {
    //1.傳遞四個(gè)參數(shù)
    return function set(target, key, value, receiver) {
        let oldValue = target[key];
        //首先獲取舊值，如果舊值是ref類(lèi)型，且新值不是ref類(lèi)型，則不允許修改
        if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
            return false;
        }
     //2.根據(jù)傳遞的shallow參數(shù)，來(lái)執(zhí)行之后的操作
        if (!shallow) {
            if (!isShallow(value) && !isReadonly(value)) {
                oldValue = toRaw(oldValue);
                value = toRaw(value);
            }
            if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
                oldValue.value = value;
                return true;
            }
        }
      //3.檢測(cè)key是不是target本身的屬性
        const hadKey = isArray(target) && isIntegerKey(key)
            ? Number(key) < target.length
            : hasOwn(target, key);
        //利用Reflect.set()來(lái)修改值,返回一個(gè)Boolean值表明是否成功設(shè)置屬性
        //Reflect.set(設(shè)置屬性的目標(biāo)對(duì)象, 設(shè)置的屬性的名稱(chēng), 設(shè)置的值, 如果遇到 `setter`，`receiver`則為`setter`調(diào)用時(shí)的`this`值)
        const result = Reflect.set(target, key, value, receiver);
        // 如果目標(biāo)是原始原型鏈中的某個(gè)元素，則不要觸發(fā)
        if (target === toRaw(receiver)) {
        //如果不是target本身的屬性那么說(shuō)明執(zhí)行的是'add'操作,增加屬性
            if (!hadKey) {
                trigger(target, "add" /* TriggerOpTypes.ADD */, key, value);
            }
      //4.比較新舊值，是否觸發(fā)依賴(lài)
            else if (hasChanged(value, oldValue)) {
      //5.觸發(fā)依賴(lài)
                trigger(target, "set" /* TriggerOpTypes.SET */, key, value, oldValue);
            }
        }
        return result;
    };
}

//判斷參數(shù)是否為string類(lèi)型，是則返回true
const isString = (val) => typeof val === 'string';
//如果參數(shù)是string類(lèi)型并且不是'NaN',且排除-值（排除負(fù)數(shù)）,然后將 key 轉(zhuǎn)換成數(shù)字再隱式轉(zhuǎn)換為字符串，與原 key 對(duì)比
const isIntegerKey = (key) => isString(key) &&
    key !== 'NaN' &&
    key[0] !== '-' &&
    '' + parseInt(key, 10) === key;

//Object.is()方法判斷兩個(gè)值是否是相同的值。
const hasChanged = (value, oldValue) => !Object.is(value, oldValue);

<script setup>
import { reactive } from "vue";
const data = reactive({
  name: "測(cè)試",
  age: 10,
});
data.name='1'//這里并未收集依賴(lài)，在處理完 createSetupContext 的上下文后，組件會(huì)停止依賴(lài)收集，并且開(kāi)始執(zhí)行 setup 函數(shù)。具體原因有興趣的讀者可以自行去了解
const testClick = ()=>{
  data.name='test'
}
</script>
<template>
  <div>
    <h1>{{ data.name }}</h1>
    <el-button @click="testClick">Click</el-button>
  </div>
</template>
<style scoped></style>

const num = reactive(2)

if (!isObject(target)) {
        if ((process.env.NODE_ENV !== 'production')) {
            console.warn(`value cannot be made reactive: ${String(target)}`);
        }
        return target;
    }

<script>
const data = reactive({
  name: "測(cè)試",
  age: 10,
});
const num = reactive(data)//定義一個(gè)已經(jīng)是響應(yīng)式對(duì)象
</script>

if (target["__v_raw" /* ReactiveFlags.RAW */] &&
    !(isReadonly && target["__v_isReactive" /* ReactiveFlags.IS_REACTIVE */])) {
            return target;
}

<script setup>
import { reactive,ref } from "vue";
const data = reactive({
  name: "測(cè)試",
  age: 10,
});
const numRef = ref(1)
const dataRef = ref({
  name: "測(cè)試2",
  age: 20,
})
const num = reactive(numRef)
const dataReactive = reactive(dataRef)
console.log('data',data)
console.log('numRef',numRef)
console.log('num',num)
console.log('dataRef',dataRef)
console.log('dataReactive',dataReactive)
</script>

<script setup>
import { reactive } from "vue";
const mapData = new Map();
mapData.set('name','張三')
const setData = new Set([1,2,3,1,1])
console.log(mapData)
console.log(setData)
const mapReactive = reactive(mapData)
console.log(mapReactive)
</script>

const targetType = getTargetType(target);
function getTargetType(value) {
    return value["__v_skip" /* ReactiveFlags.SKIP */] || !Object.isExtensible(value)
        ? 0 /* TargetType.INVALID */
        : targetTypeMap(toRawType(value));
}
function targetTypeMap(rawType) {//rawType="Map",這里返回值為2
    switch (rawType) {
        case 'Object':
        case 'Array':
            return 1 /* TargetType.COMMON */;
        case 'Map':
        case 'Set':
        case 'WeakMap':
        case 'WeakSet':
            return 2 /* TargetType.COLLECTION */;
        default:
            return 0 /* TargetType.INVALID */;
    }
}

const mutableCollectionHandlers = {
    get: /*#__PURE__*/ createInstrumentationGetter(false, false)
};
//解構(gòu)createInstrumentations
const [mutableInstrumentations, readonlyInstrumentations, shallowInstrumentations, shallowReadonlyInstrumentations] = /* #__PURE__*/ createInstrumentations();
//傳入兩個(gè)參數(shù)，是否為可讀，是否為淺層響應(yīng)
function createInstrumentationGetter(isReadonly, shallow) {
    const instrumentations = shallow
        ? isReadonly
            ? shallowReadonlyInstrumentations
            : shallowInstrumentations
        : isReadonly
            ? readonlyInstrumentations
            : mutableInstrumentations;
    return (target, key, receiver) => {
        if (key === "__v_isReactive" /* ReactiveFlags.IS_REACTIVE */) {
            return !isReadonly;
        }
        else if (key === "__v_isReadonly" /* ReactiveFlags.IS_READONLY */) {
            return isReadonly;
        }
        else if (key === "__v_raw" /* ReactiveFlags.RAW */) {
            return target;
        }
        return Reflect.get(hasOwn(instrumentations, key) && key in target
            ? instrumentations
            : target, key, receiver);
    };
}

//篇幅問(wèn)題以及這方面筆者并未深入，所以就大概帶過(guò)
function createInstrumentations() {
//創(chuàng)建了四個(gè)對(duì)象，對(duì)象內(nèi)部有很多方法,其他去掉了，完整可自行去調(diào)試查看
    const mutableInstrumentations = {
        get(key) {
            return get$1(this, key);
        },
        get size() {
            return size(this);
        },
        has: has$1,
        add,
        set: set$1,
        delete: deleteEntry,
        clear,
        forEach: createForEach(false, false)
    };
    .................
    //通過(guò)createIterableMethod方法操作keys、values、entries、Symbol.iterator迭代器方法
    const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator];
    iteratorMethods.forEach(method => {
        mutableInstrumentations[method] = createIterableMethod(method, false, false);
        readonlyInstrumentations[method] = createIterableMethod(method, true, false);
        shallowInstrumentations[method] = createIterableMethod(method, false, true);
        shallowReadonlyInstrumentations[method] = createIterableMethod(method, true, true);
    });
    return [
        mutableInstrumentations,
        readonlyInstrumentations,
        shallowInstrumentations,
        shallowReadonlyInstrumentations
    ];
}