vue数据双向绑定原理解析（get & set)
前端的数据双向绑定指的是view（视图）和model（数据）两者之间的关系；view层是页面上展示给用户看的信息，model层一般是指通过http请求从后台返回的数据。view到model的绑定都是通过事件回调函数操作的，model到view的绑定有多种方法。
angular，react，vue等mv*模式的框架都实现了数据双向绑定；angular是通过脏检查即新老数据的比较来确定哪些数据发生了变化，从而将它更新到view中；vue则是通过设置数据的get和set函数来实现的，这种方式在性能上是优于angular的。
下面代码是一个简单的定义数据get和set方法的例子，set和get方法分别在数据改变和访问的时候被调用，能够监听数据的变化：
//数据绑定的构造函数
functionObserver(data){
this.data=data;
for(varkeyindata){
if(data.hasOwnProperty(key)){
varval=data[key];
if(typeofdata[key]==="object"){
//如果值不为原始类型，则继续递归
newObserver(val);
}else{
this.convert(key,val);
}
}
}
}
//定义set和get函数
Observer.prototype.convert=function(key,val){
Object.defineProperty(this.data,key,{
enumerable:true,
confingurable:true,
get:function(){
console.log(key+"被访问了");
returnval;
},
set:function(newVal){
console.log(key+"被设置了新值"+newVal);
val=newVal;
}
});
}
varapp=newObserver({name:"xieshuai",age:24,address:{city:"shenzheng"}});
app.data.name;//name被访问了
app.data.age=18;//age被设置了新值18
Object.defineProperty，这是ES6新增的方法，通过这个方法，可以自定义getter和setter函数。
上面的代码只是个简单的例子，并没有处理数组的情况；不过这是vue实现数据双向绑定的核心。
本文到此结束，文中若有不对之处，还望指正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。