手写Vue之MyVue

这里要实现的功能是，把new Vue({data:{}})里面的data数据进行挂载，直接挂载到this上面，然后通过代理的方式，间接获取和设置到this里面。

如下图：_MyData是从传入的参数里面取出的，然后通过给this定义a和v两个属性，间接去操控_MyData里面的数据。

 

function MyVue(option){
    this.$option = option;// 先把参数保存起来
    let data = this._MyData = option.data;// 单独提取出参数里面的data属性
    this.BindData(data);// 把data绑定到vm上面
    // 编译之前，给data的每个属性加上Dep
    new Observer(this._MyData);
    $compile = new MyCompile(option.el,this);
    // option.el && this.GetElementByEl(option.el)// 获取到el中对应的所有标签
}

MyVue.prototype = {

    BindData(data){
        let me = this;// 这里的this指的是new的时候创建的空对象 {}
        // 遍历data，
        Object.keys(data).forEach(function (key) {
            me._ProxyData(key);
        })
    },
    _ProxyData:function (key) {
        let me = this;// 这里的this依然是new时候的空对象
        Object.defineProperty(me,key,{
            configurable:false,
            enumerable:true,
            set:function (value) {
                this._MyData[key]=value;
            },
            get:function () {
                return this._MyData[key];
            }
        })
    },

}

代码：

function MyVue(option){
    this.$option = option;// 先把参数保存起来
    let data = this._MyData = option.data;// 单独提取出参数里面的data属性
    this.BindData(data);// 把data绑定到vm上面
    // 编译之前，给data的每个属性加上Dep
    new Observer(this._MyData);
    $compile = new MyCompile(option.el,this);
    // option.el && this.GetElementByEl(option.el)// 获取到el中对应的所有标签
}

MyVue.prototype = {

    BindData(data){
        let me = this;// 这里的this指的是new的时候创建的空对象 {}
        // 遍历data，
        Object.keys(data).forEach(function (key) {
            me._ProxyData(key);
        })
    },
    _ProxyData:function (key) {
        let me = this;// 这里的this依然是new时候的空对象
        Object.defineProperty(me,key,{
            configurable:false,
            enumerable:true,
            set:function (value) {
                this._MyData[key]=value;
            },
            get:function () {
                return this._MyData[key];
            }
        })
    },

}