Vue学习笔记--Vue双向绑定实现原理

           我们知道Vue可以实现数据双向绑定，Angular和Vue都是采用的MVVM 模式，意思就是当M（模型层）层数据进行修改时，VM层会监测到变化，并且通知V（视图层）层进行相应的修改，反之修改V层则会通知M层数据进行修改，实现了视图与模型层的相互解耦。其中Angular是采用的脏值检测实现的，Vue是采用的发布-订阅模式+数据劫持 实现的。

          Vue是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的。当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

 

那么先看看Vue对数据的包装吧！使用 Object.getOwnPropertyDescriptor 查看数据属性描述。

    var mydata={
        name:'cc',
        age:'2'
    };
    var app= new Vue({
        el: '#app',
        data: mydata
    });
    console.log(app.name===mydata.name);
    
    console.log(Object.getOwnPropertyDescriptor(app,'name'));
    console.log(Object.getOwnPropertyDescriptor(mydata,'name'));

控制台输出：

 

诶，可以看到确实Vue对data数据进行了处理，这个动作发生在 Vue生命周期的 beforeCreate  和 created 之间。（注意这里可以看到getter\setter的函数名不一样，这是因为将data对象进行数据劫持之后，要在vue实例对象上可访问，将根级响应式属性代理到了vue实例上）

可以试着使用一下Object.defineProperty ，在数据改变的时候得到响应。比如像这样：

var mydata={
    name:'cc',
    age:'2',
    like:{
        dog:'二狗子',
        cat:'小哈'
    }
};

//递归地设置
function DataProcess(data)
{
    if (!data || typeof data !== 'object')
        return;
    Object.keys(data).forEach(function(item){
        definePro(data,item,data[item])
        }
    );
}
function definePro(data,item,val)
{
        DataPr