vue的基本原理--实现双向绑定mvvm

1. 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2. 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3. 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4. mvvm入口函数，整合以上三者

// Observer.js
function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }

    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key])
    })
}

function defineReactive(data, key, val) {
    observe(val)
    Object.defineProperty(data, key, {
        enumerable: true, // 可枚举
        configurable: false, // 不能再define
        get: function() {
            console.log("get")
            return val;
        },
        set: function(newVal) {
            console.log("set:"+newVal)
            val = newVal;
        }
    })
}

var testObj = {"a":"123", "b":{"c": "456"}};
obsever(testObj);
testObj.a;    // get
testObj.b.c;  //get get
testObj.a = "789" //set "789"
testObj.b.c = "789" //get set "789"

// compile.js

// watch.js
function Dep() {
    this.subs = []
}

Dep.prototype = {
    addSub: function (sub) {
        this.subs.push(sub)
    },
    notify: function () {
        this.subs.forEach(function (sub) {
            sub.update();
        })
    }
}