import { reactive, ref } from "vue"; 

import type { Ref } from "vue";

// 定義響應式數據

const count: Ref<number> = ref(0);

function countClick() {

        count.value++; // 更新數據

}

// 定義引用類型數據標注

interface TypeForm {

        name: string;

        num: number;

        list?: Array<[]>;

}

const formInline: TypeForm = reactive({

        name: "",

        num: 0,

});

formInline.name = 'KinHKin'

formInline.num = 100

formInline.list = [1,2,3,4]

const obj = {
  foo: ref(1),
  bar: ref(2)
}
 
// 該函數接收一個 ref
// 需要通過 .value 取值
// 但它會保持響應性
callSomeFunction(obj.foo)
 
// 仍然是響應式的
const { foo, bar } = obj

<script setup>
import { ref } from 'vue'
 
const count = ref(0)
 
function increment() {
  count.value++
}
</script>
 
<template>
  <button @click="increment">
    {{ count }} <!-- 無需 .value -->
  </button>
</template>

function ref(value) {
    return createRef(value, false);
}
function shallowRef(value) {
    return createRef(value, true);
}

function createRef(rawValue, shallow) {
    if (isRef(rawValue)) {
        return rawValue;
    }
    return new RefImpl(rawValue, shallow);
}

function isRef(r) {
    return !!(r && r.__v_isRef === true);
}

class RefImpl {
    constructor(value, __v_isShallow) {
        this.__v_isShallow = __v_isShallow;
        this.dep = undefined;
        this.__v_isRef = true;
        this._rawValue = __v_isShallow ? value : toRaw(value);
        this._value = __v_isShallow ? value : toReactive(value);
    }
    get value() {
        trackRefValue(this);
        return this._value;
    }
    set value(newVal) {
        const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal);
        newVal = useDirectValue ? newVal : toRaw(newVal);
        if (shared.hasChanged(newVal, this._rawValue)) {
            this._rawValue = newVal;
            this._value = useDirectValue ? newVal : toReactive(newVal);
            triggerRefValue(this, newVal);
        }
    }
}

function trackRefValue(ref) {
    if (shouldTrack && activeEffect) {
        ref = toRaw(ref);
        {
            trackEffects(ref.dep || (ref.dep = createDep()), {
                target: ref,
                type: "get" /* TrackOpTypes.GET */,
                key: 'value'
            });
        }
    }
}

function triggerRefValue(ref, newVal) {
    ref = toRaw(ref);
    if (ref.dep) {
        {
            triggerEffects(ref.dep, {
                target: ref,
                type: "set" /* TriggerOpTypes.SET */,
                key: 'value',
                newValue: newVal
            });
        }
    }
}

function reactive(target) {
    // if trying to observe a readonly proxy, return the readonly version.
    if (isReadonly(target)) {
        return target;
    }
    return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
}

function isReadonly(value) {
return !!(value && value["__v_isReadonly" /* ReactiveFlags.IS_READONLY */]);

}

export const enum ReactiveFlags {
  SKIP = '__v_skip', // 是否跳過響應式 返回原始對象
  IS_REACTIVE = '__v_isReactive', // 標記一個響應式對象
  IS_READONLY = '__v_isReadonly', // 標記一個只讀對象
  RAW = '__v_raw' // 標記獲取原始值
  IS_SHALLOW  = '__v_isShallow' // 是否淺層次拷貝
}

function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) {
    // 如何不是對象 曝出警告 返回其原始值
    if (!shared.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
 
     // 如果目標已經是一個代理，直接返回  KinHKin譯
    // 除非對一個響應式對象執(zhí)行 readonly
 
    if (target["__v_raw" /* ReactiveFlags.RAW */] &&
        !(isReadonly && target["__v_isReactive" /* ReactiveFlags.IS_REACTIVE */])) {
        return target;
    }
    // target already has corresponding Proxy
    // 目標已經存在對應的代理對象 KinHKin譯
    const existingProxy = proxyMap.get(target);
    if (existingProxy) {
        return existingProxy;
    }
    // only specific value types can be observed.
    // 只有白名單里的類型才能被創(chuàng)建響應式對象  KinHKin譯
    const targetType = getTargetType(target);
    if (targetType === 0 /* TargetType.INVALID */) {
        return target;
    }
    const proxy = new Proxy(target, targetType === 2 /* TargetType.COLLECTION */ ? collectionHandlers : baseHandlers);
    proxyMap.set(target, proxy);
    return proxy;
}

const mutableHandlers = {
    get,
    set,
    deleteProperty,
    has,
    ownKeys
};

const get = /*#__PURE__*/ createGetter();
const shallowGet = /*#__PURE__*/ createGetter(false, true);
const readonlyGet = /*#__PURE__*/ createGetter(true);
const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true);

function createGetter(isReadonly = false, shallow = false) {
    return function get(target, key, receiver) { }
}

function createGetter(isReadonly = false, shallow = false) {
    return function get(target, key, receiver) {
        // 如果key是響應式的對象  就返回不是只讀  *KinHKin注釋*
        if (key === "__v_isReactive" /* ReactiveFlags.IS_REACTIVE */) {
            return !isReadonly;
        }
        // 如果key是只讀對象  就返回只讀是true  *KinHKin注釋*
        else if (key === "__v_isReadonly" /* ReactiveFlags.IS_READONLY */) {
            return isReadonly;
        }
        // 如果key是淺層次響應對象  就返回淺層次是true  *KinHKin注釋*
        else if (key === "__v_isShallow" /* ReactiveFlags.IS_SHALLOW */) {
            return shallow;
        }
        // 如果key是原始值對象并且改變的值和原始標記一致  就返回原始值  *KinHKin注釋*
        else if (key === "__v_raw" /* ReactiveFlags.RAW */ &&
            receiver ===
                (isReadonly
                    ? shallow
                        ? shallowReadonlyMap
                        : readonlyMap
                    : shallow
                        ? shallowReactiveMap
                        : reactiveMap).get(target)) {
            return target;
        }
        // 判斷傳入的值是不是數組
        const targetIsArray = shared.isArray(target);
        // 如果不是只讀 并且是數組
        // arrayInstrumentations 是一個對象，對象內保存了若干個被特殊處理的數組方法，并以鍵值對的形式存儲。 *KinHKin注釋*
        if (!isReadonly && targetIsArray && shared.hasOwn(arrayInstrumentations, key)) {
            // 特殊處理數組返回結果 
            return Reflect.get(arrayInstrumentations, key, receiver);
        }
        // 獲取 Reflect 執(zhí)行的 get 默認結果
        const res = Reflect.get(target, key, receiver);
        // 如果是 key 是 Symbol，并且 key 是 Symbol 對象中的 Symbol 類型的 key
        // 或者 key 是不需要追蹤的 key: __proto__,__v_isRef,__isVue
        // 直接返回 get 結果 *KinHKin注釋*
        if (shared.isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
            return res;
        }
        // 不是只讀對象 執(zhí)行 track 收集依賴 *KinHKin注釋*
        if (!isReadonly) {
            track(target, "get" /* TrackOpTypes.GET */, key);
        }
        // 是淺層次響應 直接返回 get 結果 *KinHKin注釋*
        if (shallow) {
            return res;
        }
        if (isRef(res)) {
            // ref unwrapping - skip unwrap for Array + integer key.
            // 如果是 ref ，則返回解包后的值 - 當 target 是數組，key 是 int 類型時，不需要解包 *KinHKin注釋*
            return targetIsArray && shared.isIntegerKey(key) ? res : res.value;
        }
        if (shared.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.
            // 將返回的值也轉換成代理，我們在這里做 isObject 的檢查以避免無效值警告。
            // 也需要在這里惰性訪問只讀和星影視對象，以避免循環(huán)依賴。*KinHKin注釋*
            return isReadonly ? readonly(res) : reactive(res);
        }
        // 不是 object 類型則直接返回 get 結果 *KinHKin注釋*
        return res;
    };
}

// 純函數 默認深層次響應 函數不入參 *KinHKin*
const set = /*#__PURE__*/ createSetter();
// 純函數 淺層次響應 函數入參是true *KinHKin*
const shallowSet = /*#__PURE__*/ createSetter(true);
function createSetter(shallow = false) {
    return function set(target, key, value, receiver) {
        let oldValue = target[key];
        // 如果原始值是只讀and是ref類型and新的value屬性不是ref類型  直接返回
        if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
            return false;
        }
        if (!shallow) {
        // 如果新的值不是淺層次響應對象，也不是只讀  更新舊值 新值為普通對象 *KinHKin*
            if (!isShallow(value) && !isReadonly(value)) {
                oldValue = toRaw(oldValue);
                value = toRaw(value);
            }
        // 當不是 只讀 模式時，判斷舊值是否是 Ref，如果是則直接更新舊值的 value
        // 因為 ref 有自己的 setter *KinHKin*
            if (!shared.isArray(target) && isRef(oldValue) && !isRef(value)) {
                oldValue.value = value;
                return true;
            }
        }
        // 判斷 target 中是否存在 key *KinHKin*
        const hadKey = shared.isArray(target) && shared.isIntegerKey(key)
            ? Number(key) < target.length
            : shared.hasOwn(target, key);
        const result = Reflect.set(target, key, value, receiver);
        // don't trigger if target is something up in the prototype chain of original
        // 如果目標是原始對象原型鏈上的屬性，則不會觸發(fā) trigger 派發(fā)更新  *KinHKin*
        if (target === toRaw(receiver)) {
            // 使用 trigger 派發(fā)更新，根據 hadKey 區(qū)別調用事件
            if (!hadKey) {
                trigger(target, "add" /* TriggerOpTypes.ADD */, key, value);
            }
            else if (shared.hasChanged(value, oldValue)) {
                trigger(target, "set" /* TriggerOpTypes.SET */, key, value, oldValue);
            }
        }
        return result;
    };
}