MVVM原理(5)：视图修改数据 代理proxy

一、视图修改数据

修改一下compileUtil：

const compileUtil = {
	model (node, expr, vm) {
        const value = this.getVal(expr, vm)
        // 绑定更新函数，数据=>视图
        new Watcher(vm, expr, (newVal) => {  // 当数据变化时执行该回调函数修改对应的视图
            this.updater.modelUpdater(node, newVal)
        })
        // 视图=>数据=>视图
        node.addEventListener('input', e => {  // 监听input事件修改数据，数据修改后就会通知dep，进而通知watcher更新视图
            this.setVal(expr, vm, e.target.value)
        })
        this.updater.modelUpdater(node, value)
    },
    ...
    setVal (expr, vm, inputValue) {
        let len = expr.split('.').length
        expr.split('.').reduce((data, curVal, index) => {
            if(index === len - 1) data[curVal] = inputValue
            return data[curVal]
        }, vm.$data)
    },
}

二、代理

修改一下Vue类：

class Vue {
    constructor (options) {
        this.$el = options.el
        this.$data = options.data
        this.$options = options

        // 当传入的el不为空时才进行相关的后续工作
        if(this.$el) {
            // 实现数据监听者Observer
            new Observer(this.$data)
            // 实现指令解析器Compile
            new Compile(this.$el, this)  // 传入绑定元素以及全局vue实例
            // 代理
            this.proxyData(this.$data)
        }
    }
    proxyData (data) {
        for(let key in data) {
            Object.defineProperty(this, key, {
                get () {
                    return data[key]
                },
                set (newVal) {
                    data[key] = newVal
                }
            })
        }
    }
}