Vue中Object.defineProperty()的应用

一、基本定义
1.js中的对象属性有两种：数据属性和访问器属性。每种属性都包含各自的特性，供内部使用，js不能直接访问，但是可以通过Object.defineProperty()访问、修改。
2.访问器属性
(1)Object.defineProperty()接受三个参数：属性所在的对象，属性名称和一个描述符对象
var obj = {_name:"张三"};
Object.defineProperty(obj, "name",{
get:function(){
return this._name;
},
set:function(newValue){
this._name = newValue;
console.log("属性值被更改，通知wacher，对象的属性值被更改");
}
})
二、Object.defineProperty()的局限性
1.监测不到对象属性的添加、删除
eg: var data = {_obj:{}}
obj.defineProperty(obj,"obj",{
get:function(){
return this._data;
},
set:function(newValue){
console.log("变化了")
}
})
data.obj.name = "张三";//监测不到
vue中的解决方案：Vue.$set(obj,''name","zhangsan");
2.监测不到数组长度的变化、给数组的某一项直接赋值
eg:var arr = [1,2,3,5];
arr.length = 0;//监测不到
arr[0] = 10;//监测不到
Vue中的解决方案：Vue 实现了一组观察数组的变异方法，可以调用他们来触发视图的更新
源码如下：

WGHZ5@@`1$E58$EVVO(LV3N.png