关于mvvm的简单实现，模拟vue(1)------ 数据劫持

我们在使用vue开发时，一般都是通过以下代码来创建Vue实例的
1 let vm = new Vue({
    el:"#app",
    data:{
    a:1,
    b:1
    }
});

此次我们通过自己写一个方法类，来简单模拟Vue实现MVVM数据双向绑定
     创建index.html测试代码   
        <div id="app">
            <p>{{a}}</p>
            <p>{{b}}</p>
        </div>
        <script src="mvvm.js"></script>
        <script>
            let demo = new Demo({
                el:"#app",
                data:{
                    a:1,
                    b:1
                }
            })
        </script>    

　接下来是js逻辑的实现部分:

1，通过Object.defineProperty对data上的属性实现深度数据劫持

function Demo (options){
    //首先将options，和data绑定到实例上
    this.$options = options;
    let data = this._data = options.data;
    //对data进行数据劫持处理
    observe(this._data);

    //将data数据里的属性挂载到this实例上
    for (let key in data) {
        Object.defineProperty(this,key,{
            enumerable:true,
            get(){
                return this._data[key];
            },
            set(newVal){
                this._data[key]=newVal;
            }
        })
    }
}

function Observe(data){
    //遍历data，对每一个属性进行劫持
    for (let key in data) {
        let value = data[key];
        console.log(value);
        Object.defineProperty(data,key,{
            enumerable:true,
            get(){
                return value;
            },
            set(newVal){
                value=newVal;
                observe(value);//=>如果修改的值是一个对象，对其进行深度劫持
            }
        });
        observe(value);//=>深度劫持，如果valu是对象，继续进行劫持处理
    }
}
function observe(data){
    if(typeof data !== "object") return;
    new Observe(data);
}

测试结果:
输出demo，可以看见，所有data属性都具有了getter和setter属性

另外重新赋值，也会持续进行数据劫持