我觉得vue原理就是 Object.defineProperty，简单实现了set和get，谢谢
简单实现了一个对象的set和get
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function Observer(data){
this.data = data;
this.observe();
}
var pro = Observer.prototype;
pro.observe = function(){
var _this = this;
var arr = Object.keys(this.data);
for(var i = 0; i < arr.length; i++){
(function(k , v){
Object.defineProperty(_this.data , k , {
set: function(value){
console.log('您设置了' + k + '属性的值为：' + value);
},
get: function(){
console.log('您调用了'+ k + '属性的get方法');
return v;
}
})
})(arr[i] , _this.data[arr[i]]);
}
}
var _data = {
name: 'xudy',
age: 30
}
//注意不能传临时对象
/*不可以这么写
var o = new Observer({
name: 'xudy',
age: 30
});
* */
var o = new Observer(_data);
o.data.name = 'aaaaaaaaa'; //您设置了name属性的值为：aaaaaaaaa
o.data.name; //您调用了name属性的get方法
o.data.age = 28; //您设置了age属性的值为：28
o.data.age; // 您调用了age属性的get方法
</script>
</head>
<body>
</body>
</html>