我们知道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