实例：
var a = {};
Object.defineProperty(a, 'b', {
set: function(newValue) {
console.log('赋值操作, 赋值' + newValue);
},
get: function() {
console.log('取值操作');
return 2; //这里需注意 我硬让他返回2
}
});
a.b = 1; // 赋值操作，赋值1
a.b; // 取值操作2虽然我将a.b的值设置成了1，但是因为我在get方法中始终返回了2，所以a.b的值一直是2。
那么，这就好玩儿了：我们可以在页面监听某个变量，当变量发生变化的时候，我们就更新对应的视图。由数据来驱动视图的更新，是不是很熟悉？是的，vue .js的核心思想就是这个。我们写个小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>defineProperty</title>
</head>
<body>
<div id="test">这是一个测试</div>
<script>
var view = document.getElementById("test");
var data = {};
var i = 0;
Object.defineProperty(data, "b", {
set: function(newValue) {
//当data.b的值改变的时候更新＃test的视图
view.textContent = newValue;
},
get: function() {}
});
setInterval(function() {
i++;
data["b"] = "data.b的值更新了，我要更新视图" + i;
}, 2000);
</script>
</body>
</html>视图的变化过程：
最开始的视图：
2秒后的视图：
重点理解：
// 3.Object.defineProperty(obj,propertyName,{}):给对象添加属性(指定描述符)
const obj = {
firstName: 'A',
lastName: 'B',
}
// 给obj添加fullName属性
// obj.fullName = 'A-B'
/*
1.数据描述符
configurable: 是否可以重新定义
enumerable: 是否可以枚举
value: 初始值
writable: 是否可以修改属性值
2.访问描述符
get: 回调函数，根据其它相关的属性动态计算得到当前属性值
set: 回调函数，监视当前属性值的变化，更新其它相关的属性值
*/
Object.defineProperty(obj,'fullName',{
get() {
return this.firstName+'-'+this.lastName;
},
set(value) {
const names = value.split('-');
this.firstName = names[0];
this.lastName = names[1];
}
})
console.log(obj.fullName);//A-B
