SOURCE

function defineReactive(obj, key, val) {
    const dep = new Dep()

    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reativeGetter() {
            dep.addSub(Dep.target)
            return val;
        },
        set: function reativeSetter (newVal) {
            if (newVal === val) return;
            dep.notify()
        }
    })
}

function isPlainObject(value) {
    return 
}

function observer(value) {
    if (!value || typeof value !== 'object') {
        return
    }
    Object.keys(value).forEach(key => {
        defineReactive(value, key, value[key])
    })
}

class Dep {
    constructor() {
        this.subs = []
    }

    addSub(sub) {
        this.subs.push(sub)
    }

    notify() {
        this.subs.forEach(sub => {
            sub.update()
        })
    }
}

class Watcher {
    constructor() {
        Dep.target = this
    }

    update() {
        console.log("视图更新了!")
    }
}

Dep.target = null;

class Vue {
    constructor(options) {
        this._data = options.data
        observer(this._data)

        new Watcher()

        console.log('render~1', this._data.test)
    }
}


let o = new Vue({
    data: {
        test: '123'
    }
})

console.log('render~2', o._data.test)

o._data.test = '345'