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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容