《Vue.js 设计与实现》 笔记

const div = document.querySelector('div');
div.innerText = "hello world";
div.onclick = ()=>console.log("ok");

<template>
  <div @click="alert('ok')">hello world</div>
</template>

const count = ref(0)
console.log(count)

if (__DEV__ && __BROWSER__ && dir.exp) {
  validateBrowserExpression(dir.exp as SimpleExpressionNode, context)
}

// b.js
export function foo() {
    console.log('hello');
}

export function bar() {
    console.log(1);
}
export function baz() {
    console.log(2);
}
export const a = /*#__PURE__*/ bar();
export const b = baz();

// a.js
import { foo } from './b';
foo();

// output.js
function foo() {
    console.log('hello');
}
function baz() {
    console.log(2);
}
baz();

foo();

export const isSpecialBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs)

// vite.config.js
export default {
  define: {
    __VUE_OPTIONS_API__: JSON.stringify(false),
  },
}

import App from 'App.vue'
const app = createApp(App)
app.config.errorHandler = (err) => {
    console.log(err)
}

const vnode = {
    tag: 'div',
    props: {
        id: 'container',
    },
    children: [
        {
            tag: 'button',
            props: {
                onClick: () => alert('hello'),
            },
            children: 'click me',
        },
    ],
};

const renderer = (vnode, container) => {
    // 创建元素
    const el = document.createElement(vnode.tag);
    // 设置属性和事件监听器
    for (const key in vnode.props) {
        if (key.startsWith('on')) {
            el.addEventListener(key.slice(2).toLowerCase(), vnode.props[key]);
        } else {
            el.setAttribute(key, vnode.props[key]);
        }
    }
    // 处理 children
    if (typeof vnode.children === 'string') {
        el.appendChild(document.createTextNode(vnode.children));
    } else {
        vnode.children.forEach((child) => {
            renderer(child, el);
        });
    }
    // 挂载父节点
    container.appendChild(el);
};

<template>
  <div @click="handler">hello</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handler() {},
  },
};
</script>

export default {
  data() {
    return {};
  },
  methods: {
    handler() {},
  },
  render() {
    return h("div", { onClick: this.handler }, "hello");
  },
};

<div id="id1" :class="cls"></div>

render() {
    return {
        tag: 'div',
        props: {
            id: 'id1',
            class: cls
        },
        patchFlag: 1 // 假设1表示 class 是动态的
    }
}

let obj = {
    text: 'hello'
}
function effect(){
    document.body.innerText = obj.text;
}

const bucket = new WeakMap()
let activeEffect;
function effect(fn) {
    activeEffect = fn
    // 为了触发依赖收集
    fn()
    activeEffect = null
}

function track(target, key) {
    if (!activeEffect) {
        return
    }
    let depsMap = bucket.get(target)
    if (!depsMap) {
        bucket.set(target, depsMap = new Map())
    }
    let deps = depsMap.get(key)
    if (!deps) {
        depsMap.set(key, deps = new Set())
    }
    deps.add(activeEffect)
}

function trigger(target, key) {
    let depsMap = bucket.get(target)
    if (!depsMap) {
        return
    }
    let deps = depsMap.get(key)
    if (!deps) {
        return
    }
    deps.forEach(effectFn => {
        effectFn()
    })
}

function reactive(obj) {
    const reactiveObj = new Proxy(obj, {
        get(target, prop) {
            track(target, prop)
            return Reflect.get(...arguments)
        },
        set(target, prop, val) {
            target[prop] = val;
            trigger(target, prop)
            return true
        },
    })
    return reactiveObj
}

let obj1 = reactive({ a: 1 })
effect(() => {
    console.log('obj1.a is', obj1.a)
})
let obj2 = reactive({ b: 10 })
effect(() => {
    console.log('obj2.b is', obj2.b)
})

obj1.a = 2;
obj2.b = 4
obj2.c = 3

const obj = reactive({ ok: true, text: 'hello' })
effect(() => {
    document.innerHTML = obj.ok ? obj.text : 'empty'
})
obj.ok = false;
obj.text = "world"

const bucket = new WeakMap()
let activeEffect;
function effect(fn) {
    // 新增
    const effectFn = () => {
        // 执行副作用函数时， 将其设置为激活状态
        activeEffect = effectFn
        fn()
    }
    effectFn.deps = []
    // 为了触发依赖收集
    effectFn()
    activeEffect = null
}

function track(target, key) {
    if (!activeEffect) {
        return
    }
    let depsMap = bucket.get(target)
    if (!depsMap) {
        bucket.set(target, depsMap = new Map())
    }
    let deps = depsMap.get(key)
    if (!deps) {
        depsMap.set(key, deps = new Set())
    }
    deps.add(activeEffect)
    // 新增
    activeEffect.deps.push(deps)
}

function trigger(target, key) {
    let depsMap = bucket.get(target)
    if (!depsMap) {
        return
    }
    let deps = depsMap.get(key)
    if (!deps) {
        return
    }
    // 新增
    let depsToRun = new Set(deps)
    depsToRun.forEach(effectFn => {
        cleanup(effectFn)
        effectFn()
    })
}

// 新增
function cleanup(effectFn) {
    let deps = effectFn.deps.pop();
    while (deps) {
        deps.delete(effectFn)
        deps = effectFn.deps.pop();
    }
}

function reactive(obj) {
    const reactiveObj = new Proxy(obj, {
        get(target, prop) {
            track(target, prop)
            return Reflect.get(...arguments)
        },
        set(target, prop, val) {
            target[prop] = val;
            trigger(target, prop)
            return true
        },
    })
    return reactiveObj
}

let obj1 = reactive({ ok: true, text: 'hello' })
effect(() => {
    console.log('obj1 is', obj1.ok ? obj1.text : 'empty')
})
obj1.ok = false;
obj1.text = 'world'

effect(() => {
    effect(() => {
        console.log(reactiveObj.a)
    })
    console.log(reactiveObj.b)
})

const bucket = new WeakMap()
let effectStack = [];
let activeEffect;
function effect(fn) {
    const effectFn = () => {
        // 新增
        // 执行副作用函数时， 将其设置为激活状态
        effectStack.push(activeEffect = effectFn)
        cleanup(effectFn)
        fn()
        effectStack.pop()
        activeEffect = effectStack[effectStack.length - 1]
    }
    effectFn.deps = []
    // 为了触发依赖收集
    effectFn()
}

function track(target, key) {
    if (!activeEffect) {
        return
    }
    let depsMap = bucket.get(target)
    if (!depsMap) {
        bucket.set(target, depsMap = new Map())
    }
    let deps = depsMap.get(key)
    if (!deps) {
        depsMap.set(key, deps = new Set())
    }
    deps.add(activeEffect)

    activeEffect.deps.push(deps)
}

function trigger(target, key) {
    let depsMap = bucket.get(target)
    if (!depsMap) {
        return
    }
    let deps = depsMap.get(key)
    if (!deps) {
        return
    }

    let depsToRun = new Set(deps)
    depsToRun.forEach(effectFn => {
        effectFn()
    })
}

function cleanup(effectFn) {
    let deps = effectFn.deps.pop();
    while (deps) {
        deps.delete(effectFn)
        deps = effectFn.deps.pop();
    }
}

function reactive(obj) {
    const reactiveObj = new Proxy(obj, {
        get(target, prop) {
            track(target, prop)
            return Reflect.get(...arguments)
        },
        set(target, prop, val) {
            target[prop] = val;
            trigger(target, prop)
            return true
        },
    })
    return reactiveObj
}

let obj1 = reactive({ ok: true, text: 'hello', num: 2 })
effect(() => {
    effect(() => {
        console.log('num is', obj1.num)
    })
    console.log('obj1 is', obj1.ok ? obj1.text : 'empty')
})
console.log('----')
obj1.ok = false;
obj1.text = 'world'
obj1.num = 10

const bucket = new WeakMap()
let effectStack = [];
let activeEffect;
function effect(fn) {
    const effectFn = () => {
        // 执行副作用函数时， 将其设置为激活状态
        effectStack.push(activeEffect = effectFn)
        cleanup(effectFn)
        fn()
        effectStack.pop()
        activeEffect = effectStack[effectStack.length - 1]
    }
    effectFn.deps = []
    // 为了触发依赖收集
    effectFn()
}

function track(target, key) {
    if (!activeEffect) {
        return
    }
    let depsMap = bucket.get(target)
    if (!depsMap) {
        bucket.set(target, depsMap = new Map())
    }
    let deps = depsMap.get(key)
    if (!deps) {
        depsMap.set(key, deps = new Set())
    }
    deps.add(activeEffect)

    activeEffect.deps.push(deps)
}

function trigger(target, key) {
    let depsMap = bucket.get(target)
    if (!depsMap) {
        return
    }
    let deps = depsMap.get(key)
    if (!deps) {
        return
    }

    let depsToRun = new Set(deps)
    depsToRun.forEach(effectFn => {
        activeEffect !== effectFn && effectFn()
    })
}

function cleanup(effectFn) {
    let deps = effectFn.deps.pop();
    while (deps) {
        deps.delete(effectFn)
        deps = effectFn.deps.pop();
    }
}

function reactive(obj) {
    const reactiveObj = new Proxy(obj, {
        get(target, prop) {
            track(target, prop)
            return Reflect.get(...arguments)
        },
        set(target, prop, val) {
            target[prop] = val;
            trigger(target, prop)
            return true
        },
    })
    return reactiveObj
}

let obj1 = reactive({ ok: true, text: 'hello', num: 2 })
effect(() => {
    console.log('obj1 is', obj1.ok ? obj1.text : 'empty')
    console.log(obj1.num++)
})
console.log('----')
obj1.ok = false;
obj1.text = 'world'
obj1.num = 44

const obj = reactive({ foo: 1 })
effect(() => {
    console.log(obj.foo)
})
obj.foo++
console.log('end')

const bucket = new WeakMap()
let effectStack = [];
let activeEffect;
function effect(fn, options) {
    const effectFn = () => {
        // 执行副作用函数时， 将其设置为激活状态
        effectStack.push(activeEffect = effectFn)
        cleanup(effectFn)
        fn()
        effectStack.pop()
        activeEffect = effectStack[effectStack.length - 1]
    }
    effectFn.deps = []
    effectFn.options = options // 新增
    // 为了触发依赖收集
    effectFn()
}

function track(target, key) {
    if (!activeEffect) {
        return
    }
    let depsMap = bucket.get(target)
    if (!depsMap) {
        bucket.set(target, depsMap = new Map())
    }
    let deps = depsMap.get(key)
    if (!deps) {
        depsMap.set(key, deps = new Set())
    }
    deps.add(activeEffect)

    activeEffect.deps.push(deps)
}

function trigger(target, key) {
    let depsMap = bucket.get(target)
    if (!depsMap) {
        return
    }
    let deps = depsMap.get(key)
    if (!deps) {
        return
    }

    let depsToRun = new Set(deps)
    depsToRun.forEach(effectFn => {
        if (activeEffect !== effectFn) {
            // 新增
            effectFn?.options?.scheduler ?
                effectFn?.options?.scheduler(effectFn) : effectFn()
        }
    })
}

function cleanup(effectFn) {
    let deps = effectFn.deps.pop();
    while (deps) {
        deps.delete(effectFn)
        deps = effectFn.deps.pop();
    }
}

function reactive(obj) {
    const reactiveObj = new Proxy(obj, {
        get(target, prop) {
            track(target, prop)
            return Reflect.get(...arguments)
        },
        set(target, prop, val) {
            target[prop] = val;
            trigger(target, prop)
            return true
        },
    })
    return reactiveObj
}


let obj1 = reactive({ foo: 1 })
effect(() => {
    console.log(obj1.foo)
}, {
    scheduler(fn) {
        Promise.resolve().then(fn)
    }
})
console.log('----')
obj1.foo++
console.log('end')

console.log('---排除过渡状态')
const jobQueue = new Set()
let isFlushing = false;
function flushJob() {
    if (isFlushing) return
    isFlushing = true;
    Promise.resolve().then(() => {
        jobQueue.forEach(fn => fn())
        isFlushing = false
    })
}
let obj2 = reactive({ foo: 2 })
effect(() => {
    console.log('obj2', obj2.foo)
}, {
    scheduler(fn) {
        jobQueue.add(fn)
        flushJob()
    }
})
console.log('----')
obj2.foo++
obj2.foo++

Promise.resolve().then(() => obj2.foo++)
Promise.resolve().then(() => obj2.foo++)

function effect(fn, options) {
    const effectFn = () => {
        cleanup(effectFn)
        effectFnStack.push(activeEffectFn = fn)
        let result = fn(); // 新增
        effectFnStack.pop()
        activeEffectFn = effectFnStack[effectFnStack.length - 1]
        return result // 新增
    }
    effectFn.options = options
    effectFn.deps = []
    if (!options.lazy) { // 新增
        effectFn()
    }
    return effectFn
}

function computed(getter) {
    const effectFn = effect(getter, {
        lazy: true
    })
    const obj = {
        get value() {
            // 仅在获取值时，才调用副作用函数
            return effectFn()
        }
    }
    return obj
}

function computed(getter) {
    let dirty = true;
    const effectFn = effect(getter, {
        lazy: true,
        scheduler(fn) {
            // 此处不需要执行 fn , 因为执行权放到了下面到 get value中

            // getter 中的响应式数据变化时， 就说明值的结果已过期
            dirty = true;

        }
    })
    let cached;
    const obj = {
        get value() {
            if (dirty) {
                cached = effectFn()
                dirty = false
            }
            return cached
        }
    }
    return obj
}

const sumRes = computed(() => obj.a + obj.b)
effect(() => {
    // 之前的响应式值，是通过 reactive 创建的， 其 getter 中会执行 track, setter 中执行 trigger
    // 但是该对象由 computed 创建， sumRes.value 的 getter 和 setter 并没有调用 track 和 trigger
    // 故 sumRes 与 value 其对应到副作用作用函数，并没有收集到依赖中
    console.log(sumRes.value)
})
obj.a++ // 不会执行上面到副作用函数

function computed(getter) {
    let dirty = true;
    let cached;
    const effectFn = effect(getter, {
        lazy: true,
        scheduler() {
            dirty = true
            // 执行了调度函数， 说明触发了依赖的响应式数据的 setter, 那么obj.value 也应该重新 set
            // 故可以把该处当成是 obj.value 的 setter
            trigger(obj, 'value')
        }
    })
    let obj = {
        get value() {
            if (dirty) {
                cached = effectFn()
                dirty = false
            }
            track(obj, 'value')
            return cached
        }
    }
    return effectFn
}

const bucket = new WeakMap()
let effectStack = [];
let activeEffect;
function effect(fn, options) {
    const effectFn = () => {
        // 执行副作用函数时， 将其设置为激活状态
        effectStack.push(activeEffect = effectFn)
        cleanup(effectFn)
        let res = fn()
        effectStack.pop()
        activeEffect = effectStack[effectStack.length - 1]
        return res
    }
    effectFn.deps = []
    effectFn.options = options // 新增
    if (!options?.lazy) {
        // 为了触发依赖收集
        effectFn()
    }
    return effectFn
}

function track(target, key) {
    if (!activeEffect) {
        return
    }
    let depsMap = bucket.get(target)
    if (!depsMap) {
        bucket.set(target, depsMap = new Map())
    }
    let deps = depsMap.get(key)
    if (!deps) {
        depsMap.set(key, deps = new Set())
    }
    deps.add(activeEffect)

    activeEffect.deps.push(deps)
}

function trigger(target, key) {
    let depsMap = bucket.get(target)
    if (!depsMap) {
        return
    }
    let deps = depsMap.get(key)
    if (!deps) {
        return
    }

    let depsToRun = new Set(deps)
    depsToRun.forEach(effectFn => {
        if (activeEffect !== effectFn) {
            // 新增
            effectFn?.options?.scheduler ?
                effectFn?.options?.scheduler(effectFn) : effectFn()
        }
    })
}

function cleanup(effectFn) {
    let deps = effectFn.deps.pop();
    while (deps) {
        deps.delete(effectFn)
        deps = effectFn.deps.pop();
    }
}

function reactive(obj) {
    const reactiveObj = new Proxy(obj, {
        get(target, prop) {
            track(target, prop)
            return Reflect.get(...arguments)
        },
        set(target, prop, val) {
            target[prop] = val;
            trigger(target, prop)
            return true
        },
    })
    return reactiveObj
}

function computed(getter) {
    let cached;
    let dirty = true;
    let effectFn = effect(getter, {
        lazy: true,
        scheduler() {
            dirty = true
            trigger(obj, 'value')
        }
    })
    let obj = {
        get value() {
            if (dirty) {
                cached = effectFn()
                dirty = false
            }
            track(obj, 'value')
            return cached
        }
    }
    return obj
}

let obj = reactive({ a: 1, b: 2 })
let sumRes = computed(() => obj.a + obj.b)
console.log('sum is', sumRes.value)
effect(() => {
    console.log('sum', sumRes.value)
})
console.log('---')
obj.a++
console.log('new sum is', sumRes.value)

watch(obj, () => {
    console.log('obj change')
})
obj.foo++

function watch(source, cb) {
    let oldVal;
    let getter;
    if (typeof source === 'function') {
        getter = source
    } else {
        // 遍历触发其属性到读取
        getter = () => traverse(source)
    }

    let effectFn = effect(() => getter(), {
        lazy: true,
        scheduler(fn) {
            let newVal = fn()
            cb(newVal, oldVal)
            oldVal = newVal
        }
    })
    oldVal = effectFn()

}
function traverse(obj, seen = new Set()) {
    // 去重， 防止嵌套自引用导致到无限循环
    if (seen.has(obj)) return
    if (typeof obj !== 'object' && obj !== null) {
        return
    }
    seen.add(obj)
    for (let k in obj) {
        traverse(obj[k], seen)
    }
    return obj
}

const bucket = new WeakMap()
let effectStack = [];
let activeEffect;
function effect(fn, options) {
    const effectFn = () => {
        // 执行副作用函数时， 将其设置为激活状态
        effectStack.push(activeEffect = effectFn)
        cleanup(effectFn)
        let res = fn()
        effectStack.pop()
        activeEffect = effectStack[effectStack.length - 1]
        return res
    }
    effectFn.deps = []
    effectFn.options = options // 新增
    if (!options?.lazy) {
        // 为了触发依赖收集
        effectFn()
    }
    return effectFn
}

function track(target, key) {
    if (!activeEffect) {
        return
    }
    let depsMap = bucket.get(target)
    if (!depsMap) {
        bucket.set(target, depsMap = new Map())
    }
    let deps = depsMap.get(key)
    if (!deps) {
        depsMap.set(key, deps = new Set())
    }
    deps.add(activeEffect)

    activeEffect.deps.push(deps)
}

function trigger(target, key) {
    let depsMap = bucket.get(target)
    if (!depsMap) {
        return
    }
    let deps = depsMap.get(key)
    if (!deps) {
        return
    }

    let depsToRun = new Set(deps)
    depsToRun.forEach(effectFn => {
        if (activeEffect !== effectFn) {
            // 新增
            effectFn?.options?.scheduler ?
                effectFn?.options?.scheduler(effectFn) : effectFn()
        }
    })
}

function cleanup(effectFn) {
    let deps = effectFn.deps.pop();
    while (deps) {
        deps.delete(effectFn)
        deps = effectFn.deps.pop();
    }
}

function reactive(obj) {
    const reactiveObj = new Proxy(obj, {
        get(target, prop) {
            track(target, prop)
            return Reflect.get(...arguments)
        },
        set(target, prop, val) {
            target[prop] = val;
            trigger(target, prop)
            return true
        },
    })
    return reactiveObj
}

function computed(getter) {
    let cached;
    let dirty = true;
    let effectFn = effect(getter, {
        lazy: true,
        scheduler() {
            dirty = true
            trigger(obj, 'value')
        }
    })
    let obj = {
        get value() {
            if (dirty) {
                cached = effectFn()
                dirty = false
            }
            track(obj, 'value')
            return cached
        }
    }
    return obj
}
function watch(source, cb) {
    let oldVal;
    let getter;
    if (typeof source === 'function') {
        getter = source
    } else {
        // 遍历触发其属性到读取
        getter = () => traverse(source)
    }

    let effectFn = effect(() => getter(), {
        lazy: true,
        scheduler(fn) {
            let newVal = fn()
            cb(newVal, oldVal)
            oldVal = newVal
        }
    })
    oldVal = effectFn()

}
function traverse(obj, seen = new Set()) {
    // 去重， 防止嵌套自引用导致到无限循环
    if (seen.has(obj)) return
    if (typeof obj !== 'object' && obj !== null) {
        return
    }
    seen.add(obj)
    for (let k in obj) {
        traverse(obj[k], seen)
    }
    return obj
}

let obj = reactive({ a: 1, b: 2 })
watch(() => obj.a, (v) => console.log('obj.a is', v))
obj.a++
obj.a++
watch(obj, (newV, oldV) => console.log('newV', newV))
obj.b++
obj.b++

function watch(source, cb, options = {}) {
    let getter;
    if (typeof source === 'function') {
        getter = source
    } else {
        getter = () => traverse(source)
    }
    let oldV;
    let job = () => {
        let newV = effectFn();
        if (options.flush === 'pre') {
            cb(newV, oldV)
        } else if (options.flush === 'post') {
            Promise.resolve().then(() => {
                cb(newV, oldV)
            })
        }
        oldV = newV
    }
    let effectFn = effect(() => getter(), {
        lazy: true,
        scheduler() {
            job()
        }
    })
    if (options.immediate) {
        job()
    }
    else {
        oldV = effectFn()
    }
}

const bucket = new WeakMap()
let effectStack = [];
let activeEffect;
function effect(fn, options) {
    const effectFn = () => {
        // 执行副作用函数时， 将其设置为激活状态
        effectStack.push(activeEffect = effectFn)
        cleanup(effectFn)
        let res = fn()
        effectStack.pop()
        activeEffect = effectStack[effectStack.length - 1]
        return res
    }
    effectFn.deps = []
    effectFn.options = options // 新增
    if (!options?.lazy) {
        // 为了触发依赖收集
        effectFn()
    }
    return effectFn
}

function track(target, key) {
    if (!activeEffect) {
        return
    }
    let depsMap = bucket.get(target)
    if (!depsMap) {
        bucket.set(target, depsMap = new Map())
    }
    let deps = depsMap.get(key)
    if (!deps) {
        depsMap.set(key, deps = new Set())
    }
    deps.add(activeEffect)

    activeEffect.deps.push(deps)
}

function trigger(target, key) {
    let depsMap = bucket.get(target)
    if (!depsMap) {
        return
    }
    let deps = depsMap.get(key)
    if (!deps) {
        return
    }

    let depsToRun = new Set(deps)
    depsToRun.forEach(effectFn => {
        if (activeEffect !== effectFn) {
            // 新增
            effectFn?.options?.scheduler ?
                effectFn?.options?.scheduler(effectFn) : effectFn()
        }
    })
}

function cleanup(effectFn) {
    let deps = effectFn.deps.pop();
    while (deps) {
        deps.delete(effectFn)
        deps = effectFn.deps.pop();
    }
}

function reactive(obj) {
    const reactiveObj = new Proxy(obj, {
        get(target, prop) {
            track(target, prop)
            return Reflect.get(...arguments)
        },
        set(target, prop, val) {
            target[prop] = val;
            trigger(target, prop)
            return true
        },
    })
    return reactiveObj
}

function computed(getter) {
    let cached;
    let dirty = true;
    let effectFn = effect(getter, {
        lazy: true,
        scheduler() {
            dirty = true
            trigger(obj, 'value')
        }
    })
    let obj = {
        get value() {
            if (dirty) {
                cached = effectFn()
                dirty = false
            }
            track(obj, 'value')
            return cached
        }
    }
    return obj
}

function traverse(obj, seen = new Set()) {
    // 去重， 防止嵌套自引用导致到无限循环
    if (seen.has(obj)) return
    if (typeof obj !== 'object' && obj !== null) {
        return
    }
    seen.add(obj)
    for (let k in obj) {
        traverse(obj[k], seen)
    }
    return obj
}

function watch(source, cb, options = {}) {
    let getter;
    if (typeof source === 'function') {
        getter = source
    } else {
        getter = () => traverse(source)
    }
    let oldV;
    let job = () => {
        let newV = effectFn();
        if (options.flush === 'pre') {
            cb(newV, oldV)
        } else if (options.flush === 'post') {
            Promise.resolve().then(() => {
                cb(newV, oldV)
            })
        }
        oldV = newV
    }
    let effectFn = effect(() => getter(), {
        lazy: true,
        scheduler() {
            job()
        }
    })
    if (options.immediate) {
        job()
    }
    else {
        oldV = effectFn()
    }
}

let obj = reactive({ a: 1, b: 2 })
watch(() => obj.a, (v) => console.log('obj.a is', v), { immediate: true, flush: 'post' })
obj.a++
console.log('end')

watch(obj, async () => {
    let resp = await fetch(url, { data: obj })
    finalData = resp
})

watch(obj, async (newV, oldV, onCleanup) => {
    let expired = false;
    onCleanup(() => {
        expired = true
    })
    const resp = await fetch(url, { data: obj })
    if (!expired) {
        finalData = resp;
    }
})

function watch(source, cb, options = {}) {
    let getter;
    if (typeof source === 'function') {
        getter = source
    } else {
        getter = () => traverse(source)
    }
    let oldV;
    let clean;
    let onCleanup = (fn) => {
        clean = fn
    }
    let job = () => {
        // 每次变更前， 清理一下
        clean && clean()
        let newV = effectFn();
        cb(newV, oldV, onCleanup)
        oldV = newV
    }
    let effectFn = effect(() => getter(), {
        lazy: true,
        scheduler() {
            if (options.flush === 'pre') {
                job()
            } else if (options.flush === 'post') {
                Promise.resolve().then(job)
            }
        }
    })
    if (options.immediate) {
        job()
    }
    else {
        oldV = effectFn()
    }
}

const obj = {
    foo: 1,
    get bar() {
        return this.foo
    }
}
const reactiveObj = new Proxy(obj, {
    get(target, key) {
        track(target, key)
        return target[key]
    },
    set(target, key) {
        trigger(target, key)
        return true
    }
})
effect(() => {
    console.log(reactiveObj.bar)
})
reactiveObj.foo++

const reactiveObj = new Proxy(obj, {
    get(target, key, receiver) {
        track(target, key)
        return Reflect.get(target, key, receiver)
    },
})

function reactive(obj) {
    return new Proxy(obj, {
        set(target, key, value, receiver) {
            const oldVal = target[key]
            const res = Reflect.set(target, key, value, receiver)
            const exists = target.hasOwnProperty(key)
            if (oldVal !== val &&
                !(Number.isNaN(value) && Number.isNaN(oldVal))) {
                trigger(target, key, exists ? 'SET' : 'ADD')
            }
            return res
        }
    })
}

const obj = {}
const proto = { foo: 1 }
const child = reactive(obj)
const parent = reactive(proto)
Object.setPrototypeOf(child, parent)

effect(() => {
    console.log(child.foo)
})
child.foo++

const RAW = Symbol()
function reactive(obj) {
    return new Proxy(obj, {
        get(target, key) {
            if (key === RAW) {
                return obj
            }
            track(target, key)
            return Reflect.get(...arguments)

        },
        set(target, key, value, receiver) {
            const oldVal = target[key]
            const res = Reflect.set(...arguments)
            if (oldVal !== value
                && !(Number.isNaN(value) && Number.isNaN(oldVal))
                && receiver[raw] === target) {
                const type = target.hasOwnProperty(key) ? 'SET' : 'ADD'
                trigger(target, key, type)
            }
            return res
        }
    })
}

function createReactive(obj, shallow = false) {
    return new Proxy(obj, {
        get(target, key) {
            if (key === RAW) {
                return obj
            }

            const val = target[key]
            const res = Reflect.get(...arguments)
            track(target, key)
            if (shallow) {
                return res
            }
            if (typeof val === 'object' && val !== null) {
                return createReactive(val, shallow)
            }
            return res
        }
    })
}
function reactive(obj) {
    return createReactive(obj, false)
}
function shallowReactive(obj) {
    return createReactive(obj, true)
}

function createReactive(obj, isShallow, isReadonly) {
    return new Proxy(obj, {
        get(target, key) {
            if (key === RAW) {
                return obj
            }
            if (!isReadonly) {
                track(target, key)
            }
            const value = target[key]
            const res = Reflect.get(...arguments)
            if (isShallow) {
                return res
            }
            if (typeof value === 'object' && value !== null) {
                return createReactive(obj, isShallow, isReadonly)
            }
            return res
        },
        set(target, key, value, receiver) {
            if (!isReadonly) {
                console.warn(`${key} is readonly`)
                return true
            }
            const oldVal = target[key]
            const res = Reflect.set(...arguments)
            const type = target.hasOwnProperty(key) ? 'SET' : 'ADD'
            if (oldVal !== value
                && !(Number.isNaN(oldVal) && Number.isNaN(value))
                && receiver[RAW] === target
            ) {
                trigger(target, key, type)
            }
            return res
        },
        deleteProperty(target, key) {
            if (isReadonly) {
                console.warn(`${key} is readonly`)
                return true
            }
            const hadKey = target.hasOwnProperty(key)
            const res = Reflect.deleteProperty(...arguments)
            if (hadKey && res) {
                trigger(target, key, 'DELETE')
            }
            return res
        }
    })
}

function readonly(obj) {
    return createReactive(obj, false, true)
}
function shallowReadonly(obj) {
    return createReactive(obj, true, true)
}

const isObject = (v) => typeof v === 'object' && v !== null
const isMap = (v) => Object.prototype.toString.call(v) === '[object Map]'
const isSet = (v) => Object.prototype.toString.call(v) === '[object Set]'
const isArray = Array.isArray
const isEqual = (a, b) => a === b || (Number.isNaN(a) && Number.isNaN(b))
function toRaw(obj) {
    const v = obj && obj[RAW]
    return v ? toRaw(v) : obj
}
const RAW = Symbol()
const ITERATE_KEY = Symbol()
const MAP_KEY_ITERATE_KEY = Symbol()

const activeEffectStack = []
let activeEffect;

const bucket = new WeakMap()

function effect(fn, options = {}) {
    const effectFn = () => {
        cleanup(effectFn)
        activeEffect = effectFn
        activeEffectStack.push(effectFn)
        const res = fn()
        activeEffectStack.pop()
        activeEffect = activeEffectStack[activeEffectStack.length - 1]
        return res
    }
    effectFn.options = options
    effectFn.deps = []
    if (!effectFn.options.lazy) {
        effectFn()
    }

    return effectFn
}
function track(target, key) {
    if (!activeEffect || !shouldTrack) return
    let depsMap = bucket.get(target)
    if (!depsMap) {
        bucket.set(target, depsMap = new Map())
    }
    let effects = depsMap.get(key)
    if (!effects) {
        depsMap.set(key, effects = new Set())
    }
    activeEffect.deps.push(effects)
    effects.add(activeEffect)
}

function trigger(target, key, type, newValue) {
    const depsMap = bucket.get(target)
    if (!depsMap) return
    const effects = depsMap.get(key) || []
    const effectsToRun = new Set(effects)

    const iterateEffects = depsMap.get(ITERATE_KEY) || []
    const mapKeyIterateEffects = depsMap.get(MAP_KEY_ITERATE_KEY) || []
    if (type === 'add'
        || type === 'delete') {
        iterateEffects.forEach(fn => effectsToRun.add(fn))
        mapKeyIterateEffects.forEach(fn => effectsToRun.add(fn))
    }
    if (isMap(target) && type === 'set') {
        iterateEffects.forEach(fn => effectsToRun.add(fn))
    }
    if (isArray(target)) {
        if (type === 'add') {
            const lengthEffects = depsMap.get('length') || []
            lengthEffects.forEach(fn => effectsToRun.add(fn))
        }
        if (key === 'length') {
            Array.from(depsMap.keys())
                .forEach(idx =>
                    idx >= newValue && depsMap.get(idx).forEach(fn => effectsToRun.add(fn))
                )
        }
    }

    effectsToRun.forEach(effectFn => {
        if (effectFn !== activeEffect) {
            effectFn.options.scheduler ? effectFn.options.scheduler(effectFn) : effectFn()
        }
    })
}

function cleanup(effectFn) {
    effectFn.deps.forEach(effects => {
        effects.delete(effectFn)
    })
    effectFn.deps.length = 0
}

let shouldTrack = true
const arrayInstrumentations = createArrayInstrumentations()
function createArrayInstrumentations() {
    const instrumentations = {};
    ['includes', 'indexOf', 'lastIndexOf'].forEach(method => {
        instrumentations[method] = function (...args) {
            const target = toRaw(this)
            const res = target[method](...args)
            if (res === false || res === -1) {
                return target[method](...args.map(toRaw))
            }
            return res
        }
    });
    ['push', 'pop', 'shift', 'unshift', 'splice'].forEach(method => {
        instrumentations[method] = function (...args) {
            const target = toRaw(this)
            shouldTrack = false;
            const res = target[method](...args)
            shouldTrack = true
            return res
        }
    })
    return instrumentations
}

function wrap(v) {
    return isObject(v) ? reactive(v) : v
}
const mutationInstrumentations = createMutationInstrumentations()
function createMutationInstrumentations() {
    const iterFn = function () {
        const target = toRaw(this)
        const it = target[Symbol.iterator]()
        track(target, ITERATE_KEY)
        return {
            next() {
                const { done, value } = it.next()
                return {
                    done,
                    value: value ? [wrap(value[0]), wrap(value[1])] : value
                }
            },
            [Symbol.iterator]() {
                return this
            }
        }
    }

    return {
        get(key) {
            const target = toRaw(this)
            track(target, key)
            const res = target.get(key)
            return wrap(res)
        },
        add(key) {
            const target = toRaw(this)
            const hadKey = target.has(key)
            const res = target.add(key)
            if (!hadKey) {
                trigger(target, key, 'add')
            }
            return res
        },
        set(key, val) {
            const target = toRaw(this)
            const hadKey = target.has(key)
            const oldValue = target.get(key)
            const res = target.set(key, toRaw(val))
            if (!hadKey) {
                trigger(target, key, 'add', val)
            } else if (!isEqual(val, oldValue)) {
                trigger(target, key, 'set', val)
            }
            return res
        },
        delete(key) {
            const target = toRaw(this)
            const hadKey = target.has(key)
            const res = target.delete(key)
            if (hadKey) {
                trigger(target, key, 'delete')
            }
            return res
        },
        forEach(fn, thisArg) {
            const target = toRaw(this)
            track(target, ITERATE_KEY)
            target.forEach((v, k) => {
                fn.call(thisArg, wrap(v), wrap(k), this)
            })
        },
        entries: iterFn,
        [Symbol.iterator]: iterFn,
        keys() {
            const target = toRaw(this)
            track(target, MAP_KEY_ITERATE_KEY)
            const it = target.keys()
            return {
                next() {
                    const { done, value } = it.next()
                    return {
                        done,
                        value: wrap(value)
                    }
                },
                [Symbol.iterator]() {
                    return this
                }
            }
        },
        values() {
            const target = toRaw(this)
            track(target, ITERATE_KEY)
            const it = target.values()
            return {
                next() {
                    const { done, value } = it.next()
                    return {
                        done,
                        value: wrap(value)
                    }
                },
                [Symbol.iterator]() {
                    return this
                }
            }
        }

    }
}

function createReactiveObject(obj, proxyMap, isShallow = false, isReadonly = false) {
    let cached = proxyMap.get(obj)
    if (!cached) {
        cached = new Proxy(obj, {
            get(target, key, receiver) {
                if (key === RAW) {
                    return obj
                }
                if (arrayInstrumentations.hasOwnProperty(key)) {
                    return arrayInstrumentations[key]
                }
                if (isMap(target) || isSet(target)) {
                    if (mutationInstrumentations.hasOwnProperty(key)) {
                        return mutationInstrumentations[key]
                    }
                    if (key === 'size') {
                        track(target, ITERATE_KEY)
                        return target[key]
                    }
                }
                if (!isReadonly && typeof key !== 'symbol') {
                    track(target, key)
                }
                const res = Reflect.get(target, key, receiver)
                if (isObject(res)
                    && !isShallow) {
                    return createReactiveObject(obj, proxyMap, isShallow, isReadonly)
                }
                return res
            },
            set(target, key, value, receiver) {
                if (isReadonly) {
                    console.log(`${key} is readonly`)
                    return true
                }
                const hadKey = target.hasOwnProperty(key)
                const oldValue = target[key]
                const type = isArray(target) ? key >= target.length ? 'add' : 'set'
                    : hadKey ? 'set' : 'add'

                const res = Reflect.set(target, key, value, receiver)
                if (!isEqual(oldValue, value)
                    && target === toRaw(receiver) // 忽略原型链上的赋值
                ) {
                    trigger(target, key, type, value)
                }
                return res
            },
            deleteProperty(target, key) {
                const hadKey = target.hasOwnProperty(key)
                const res = Reflect.deleteProperty(target, key)
                if (hadKey) {
                    trigger(target, key, 'delete')
                }
                return res
            },
            has(target, key) {
                track(target, key)
                return Reflect.has(target, key)
            },
            ownKeys(target) {
                isArray(target) ? track(target, 'length') : track(target, ITERATE_KEY)
                return Reflect.ownKeys(target)
            }
        })
        proxyMap.set(obj, cached)
    }
    return cached
}

const reactiveMap = new WeakMap()
function reactive(obj) {
    return createReactiveObject(obj, reactiveMap)
}
const shallowReactiveMap = new WeakMap()
function shallowReactive(obj) {
    return createReactiveObject(obj, shallowReactiveMap, true)
}
const readonlyMap = new WeakMap()
function readonly(obj) {
    return createReactiveObject(obj, readonlyMap, false, true)
}
const shallowReadonlyMap = new WeakMap()
function shallowReadonly(obj) {
    return createReactiveObject(obj, shallowReadonlyMap, true, true)
}


let obj = reactive({ foo: 2, baz: 10 })
effect(() => {
    console.log('1. foo in obj', 'foo' in obj)
})
delete obj.foo

effect(() => {
    for (const key in obj) {
        console.log(`2. ${key} in obj`)
    }
    console.log('---')
})
obj.bar = 3
obj.bar = 5
delete obj.bar
effect(() => {
    console.log('obj.baz', obj.baz)
})
obj.baz = 12
console.log('值没变化，不触发')
obj.baz = 12

console.log('继承的属性赋值应该只触发一次')
obj = {}
const proto = { bar: 1 }
const child = reactive(obj)
const parent = reactive(proto)
Object.setPrototypeOf(child, parent)
effect(() => {
    console.log('child.bar', child.bar)
})
child.bar = 12

console.log('深层响应')
obj = reactive({ foo: { bar: 1 } })
effect(() => {
    console.log('obj.foo.bar', obj.foo.bar)
})
obj.foo.bar = 12
console.log('浅响应')
obj = shallowReactive({ foo: { bar: 1 } })
effect(() => {
    console.log('obj.foo.bar', obj.foo.bar)
})
obj.foo = { bar: 3 }
obj.foo.bar = 10
console.log('只读')
obj = readonly({ foo: 1, bar: { baz: 3 } })
obj.foo = 2 // 警告
obj.bar.baz = 12 // 警告
console.log('浅只读')
obj = shallowReadonly({ foo: 1, bar: { baz: 1 } })
obj.foo = 2 // 警告
obj.bar.baz = 3 // 不警告
console.log('代理数组')
let arr = reactive(['foo'])
effect(() => {
    console.log(arr[0])
})
arr[0] = 'bar'
effect(() => {
    console.log('length', arr.length)
})
console.log('设置越界索引能够触发 length 的响应')
arr[1] = 'xxx' // 触发响应
arr = reactive([0, 1])
effect(() => {
    console.log('arr[0]', arr[0])
})
effect(() => {
    console.log('arr[1]', arr[1])
})
console.log('修改length导致的元素被删除，也会触发响应')
arr.length = 1
arr = reactive([1])
effect(() => {
    for (const key in arr) {
        console.log(`arr[${key}]`)
    }
})
console.log('正确触发 for..in')
arr[2] = 'bar'
console.log('---')
arr.length = 1

arr = reactive([1])
effect(() => {
    for (const v of arr) {
        console.log(v)
    }
})
console.log('正确触发 for..of')
arr[1] = 3
console.log('---')
arr.length = 1

obj = {}
arr = reactive([obj])
console.log('includes', arr.includes(obj))

console.log('不会堆栈溢出')
arr = reactive([])
effect(() => {
    arr.push(1)
})
effect(() => {
    arr.push(1)
})

let map = reactive(new Map([['key', 1]]))
effect(() => {
    console.log('map.get(key)', map.get('key'))
})
console.log('Map.set')
map.set('key', 2)
console.log('----')
map.set('key2', 3)
console.log('map.size', map.size)
console.log('map.delete', map.delete('key'))
console.log('不污染原始数据')
const m = new Map()
const p1 = reactive(m)
const p2 = reactive(new Map())
p1.set('p2', p2)
effect(() => {
    console.log(m.get('p2').size)
})
m.get('p2').set('a', 1) // 不触发
let p = reactive(new Map([[{ key: 1 }, { value: 1 }]]))
effect(() => {
    p.forEach((v, k) => {
        console.log(`${k}: ${v}`)
    })
})
console.log('forEach')
p.set({ key: 2 }, { value: 2 })

let key = { key: 1 }
let value = new Set([1, 2, 3])
p = reactive(new Map([[key, value]]))
console.log('----')
effect(() => {
    p.forEach((v) => {
        console.log('v.size', v.size)
    })
})
console.log('forEach获取的应该也是响应式的')
p.get(key).delete(1)
console.log('Map.set 也要触发 forEach')
p = reactive(new Map([['key', 1]]))
effect(() => {
    p.forEach((v, k) => {
        console.log(`${k}: ${v}`)
    })
})
p.set('key', 4)

console.log('迭代器方法')
p = reactive(new Map([['key1', 'value1'], ['key2', 'value2']]))
effect(() => {
    for (const [key, value] of p) {
        console.log(`${key}: ${value}`)
    }
    for (const k of p.keys()) {
        console.log('key: ', k)
    }
    for (const v of p.values()) {
        console.log('value: ', v)
    }
})
p.set('key3', 'value3')

p = reactive(new Map([['key', 'value']]))
effect(() => {
    for (const k of p.keys()) {
        console.log('k: ', k)
    }
})
console.log('应该不执行')
p.set('key', 2)
console.log('----')