// 判斷是否是一個(gè)對(duì)象
const isObject = val => val !== null && typeof val === 'object'
// 如果是對(duì)象則調(diào)用reactive
const convert= target => isObject(target) ? reactive(target) : target
// 判斷對(duì)象是否存在key屬性
const haOwnProperty = Object.prototype.hasOwnProperty
const hasOwn = (target, key) => haOwnProperty.call(target, key)

export function reactive (target) {
? ? if (!isObject(target)) {
? ? ? ? // 如果不是對(duì)象直接返回
? ? ? ? return target
? ? }

? ? const handler = {
? ? ? ? get (target, key, receiver) {
? ? ? ? ? ? // 收集依賴
? ? ? ? ? ? const result = Reflect.get(target, key, receiver)
? ? ? ? ? ? // 如果屬性是對(duì)象則需要遞歸處理
? ? ? ? ? ? return convert(result)
? ? ? ? },
? ? ? ? set (target, key, value, receiver) {
? ? ? ? ? ? const oldValue = Reflect.get(target, key, receiver)
? ? ? ? ? ? let result = true;
? ? ? ? ? ? // 需要判斷當(dāng)前傳入的新值和oldValue是否相等，如果不相等再去覆蓋舊值，并且觸發(fā)更新
? ? ? ? ? ? if (oldValue !== value) {
? ? ? ? ? ? ? ? result = Reflect.set(target, key, value, receiver)
? ? ? ? ? ? ? ? // 觸發(fā)更新...
? ? ? ? ? ? }
? ? ? ? ? ? // set方法需要返回布爾值
? ? ? ? ? ? return result;
? ? ? ? },
? ? ? ? deleteProperty (target, key) {
? ? ? ? ? ? // 首先要判斷當(dāng)前target中是否有自己的key屬性
? ? ? ? ? ? // 如果存在key屬性，并且刪除要觸發(fā)更新
? ? ? ? ? ? const hasKey = hasOwn(target, key)
? ? ? ? ? ? const result = Reflect.deleteProperty(target, key)
? ? ? ? ? ? if (hasKey && result) {
? ? ? ? ? ? ? ? // 觸發(fā)更新...
? ? ? ? ? ? }
? ? ? ? ? ? return result;
? ? ? ? }
? ? }
? ? return new Proxy(target, handler)
}

let activeEffect = null;
export function effect (callback) {
? ? activeEffect = callback;
? ? // 訪問(wèn)響應(yīng)式對(duì)象屬性，收集依賴
? ? callback();
? ? // 依賴收集結(jié)束要置null
? ? activeEffect = null;
}

let targetMap = new WeakMap()

export function track (target, key) {
? ? // 判斷activeEffect是否存在
? ? if (!activeEffect) {
? ? ? ? return;
? ? }
? ? // depsMap存儲(chǔ)對(duì)象和effect的對(duì)應(yīng)關(guān)系
? ? let depsMap = targetMap.get(target)
? ? // 如果不存在則創(chuàng)建一個(gè)map存儲(chǔ)到targetMap中
? ? if (!depsMap) {
? ? ? ? targetMap.set(target, (depsMap = new Map()))
? ? }
? ? // 根據(jù)屬性查找對(duì)應(yīng)的dep對(duì)象
? ? let dep = depsMap.get(key)
? ? // dep是一個(gè)集合，用于存儲(chǔ)屬性所對(duì)應(yīng)的effect函數(shù)
? ? if (!dep) {
? ? ? ? // 如果不存在，則創(chuàng)建一個(gè)新的集合添加到depsMap中
? ? ? ? depsMap.set(key, (dep = new Set()))
? ? }
? ? dep.add(activeEffect)
}

get (target, key, receiver) {
? ? // 收集依賴
? ? track(target, key)
? ? const result = Reflect.get(target, key, receiver)
? ? // 如果屬性是對(duì)象則需要遞歸處理
? ? return convert(result)
},

export function trigger (target, key) {
? ? const depsMap = targetMap.get(target)
? ? // 如果沒(méi)有找到直接返回
? ? if (!depsMap) {
? ? ? ? return;
? ? }
? ? const dep = depsMap.get(key)
? ? if (dep) {
? ? ? ? dep.forEach(effect => {
? ? ? ? ? ? effect()
? ? ? ? })
? ? }
}

set (target, key, value, receiver) {
? ? const oldValue = Reflect.get(target, key, receiver)
? ? let result = true;
? ? // 需要判斷當(dāng)前傳入的新值和oldValue是否相等，如果不相等再去覆蓋舊值，并且觸發(fā)更新
? ? if (oldValue !== value) {
? ? ? ? result = Reflect.set(target, key, value, receiver)
? ? ? ? // 觸發(fā)更新...
? ? ? ? trigger(target, key)
? ? }
? ? // set方法需要返回布爾值
? ? return result;
},
deleteProperty (target, key) {
? ? // 首先要判斷當(dāng)前target中是否有自己的key屬性
? ? // 如果存在key屬性，并且刪除要觸發(fā)更新
? ? const hasKey = hasOwn(target, key)
? ? const result = Reflect.deleteProperty(target, key)
? ? if (hasKey && result) {
? ? ? ? // 觸發(fā)更新...
? ? ? ? trigger(target, key)
? ? }
? ? return result;
}

export function ref (raw) {
? ? // 判斷raw是否是ref創(chuàng)建的對(duì)象，如果是直接返回
? ? if (isObject(raw) && raw.__v__isRef) {
? ? ? ? return raw
? ? }

? ? // 之前已經(jīng)定義過(guò)convert函數(shù)，如果參數(shù)是對(duì)象就會(huì)調(diào)用reactive函數(shù)創(chuàng)建響應(yīng)式
? ? let value = convert(raw);

? ? const r = {
? ? ? ? __v__isRef: true,
? ? ? ? get value () {
? ? ? ? ? ? track(r, 'value')
? ? ? ? ? ? return value
? ? ? ? },
? ? ? ? set value (newValue) {
? ? ? ? ? ? // 判斷新值和舊值是否相等
? ? ? ? ? ? if (newValue !== value) {
? ? ? ? ? ? ? ? raw = newValue
? ? ? ? ? ? ? ? value = convert(raw)
? ? ? ? ? ? ? ? // 觸發(fā)更新
? ? ? ? ? ? ? ? trigger(r, 'value')
? ? ? ? ? ? }
? ? ? ? }
? ? }

? ? return r
}

export function toRefs (proxy) {
? ? // 如果是數(shù)組創(chuàng)建一個(gè)相同長(zhǎng)度的數(shù)組，否則返回一個(gè)空對(duì)象
? ? const ret = proxy instanceof Array ? new Array(proxy.length) : {}

? ? for (const key in proxy) {
? ? ? ? ret[key] = toProxyRef(proxy, key)
? ? }

? ? return ret;
}

function toProxyRef (proxy, key) {
? ? const r = {
? ? ? ? __v__isRef: true,
? ? ? ? get value () { // 這里已經(jīng)是響應(yīng)式對(duì)象了，所以不需要再收集依賴了
? ? ? ? ? ? return proxy[key]
? ? ? ? },
? ? ? ? set value (newValue) {
? ? ? ? ? ? proxy[key] = newValue
? ? ? ? }
? ? }
? ? return r
}

export function computed (getter) {
? ? const result = ref()

? ? effect(() => (result.value = getter()))

? ? return result
}