手写vue双向数据绑定原理

class Vue {
   
    constructor(options) {
   
        this.$el = options.el;
        this.$data = options.data;
        let computed = options.computed;
        let methods = options.methods
        // 这个跟元素是否存在
        if (this.$el) {
   

            // 把数据全部转化成用Object.defineProperty来定义
            new Observer(this.$data)

            for(let key in computed) {
   
                Object.defineProperty(this.$data,key,{
   
                    get: () => {
   
                        return computed[key].call(this)
                    }
                })
            }

            for(let key in methods) {
   
                Object.defineProperty(this,key, {
   
                    get() {
   
                        return methods[key]
                    }
                })
            }

            // 把数据获取操作，vm上的取值操作都代理到vm.$data
            this.proxyVm(this.$data)

            new Compiler(this.$el, this)
        }
    }
    proxyVm(data) {
   
        for(let key in data) {
   
            Object.defineProperty(this,key, {
   
                get() {
   
                    return data[key]    //进行了转换操作
                },
                set(newVal) {
   
                    data[key] = newVal
                }
            })
        }
    }
}

class Observer {
       //实现数据劫持功能
    constructor(data) {
   
        this.observer(data);

    }
    observer(data) {
   
        // 如果是对象才观察
        if (data && typeof data == 'object') {
   
            // 如果是对象
            for (let key in data) {
   
                this.defineReactive(data, key, data[key]);
            }
        }
    }

    defineReactive