MVVM原理(3)：数据监听器Observer

一、Observer

• Observer的目的是利用Object.defineProperty()中的get和set，在数据变化时，可以通知Dep

class Observer {
    constructor (data) {
        this.observe(data)
    }
    observe (data) {
        if(data && typeof data === 'object') {
            Object.keys(data).forEach(key => {
                this.defineReactive(data, key, data[key])
            })
        }
    }
    defineReactive (obj, key, value) {
        this.observe(value)  // 如果是对象的话就会继续递归监听
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: false,
            get () {
                return value
            },
            set: (newVal) => {   // 使用普通函数的话this指向obj
                if(newVal !== value) {
                    this.observe(newVal)   // 对新值也要进行监听
                    value = newVal
                }
            }
        })
    }
}

在Vue类中调用：

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

        // 当传入的el不为空时才进行相关的后续工作
        if(this.$el) {
            // 实现指令解析器Compile
            new Compile(this.$el, this)  // 传入绑定元素以及全局vue实例
            // 实现数据监听者Observer
            new Observer(this.$data)
            // ....
        }
    }
}