vue 的双向数据绑定是基于es5的 object对象的defineProperty属性,重写data的set和get函数来实现的。
1、defineProperty 数据展示
1 Object.defineProperty(obj,‘name‘,{ 2 configurable:true , // false则不可以删除key值 3 enumerable:true , // false则在枚举时候会忽略 4 value:‘xixi‘ 5 writable:true // false则不可更改key的value值 6 }); 7 8 //writable为false 9 var obj = {}; 10 Object.defineProperty(obj,‘name‘,{ 11 value:‘xixi‘ 12 writable:false, 13 configurable:true , 14 enumerable:true , 15 }); 16 obj.val = ‘西瓜‘;//writable为false,不可以更改。 17 18 //configurable为false 19 var obj = {}; 20 Object.defineProperty(obj,‘name‘,{ 21 value:‘xixi‘ 22 writable:true, 23 configurable:false , 24 enumerable:true , 25 }); 26 obj.val = ‘西瓜‘; 27 delete obj.val //configurable为false,不可以删除。 28 29 //enumerable为false 30 var obj = {}; 31 Object.defineProperty(obj,‘name‘,{ 32 value:‘xixi‘ 33 writable:true, 34 configurable:true , 35 enumerable:false , 36 }); 37 for(var i in obj) { 38 console.log(obj[i]) // enumerable为false时,不会显示值 39 }
2、存取器描述
1 var obj = {}; 2 Object.defineProperty(obj,‘name‘,{ 3 get:function(){} | undefined, 4 set:function(){} | undefined, 5 configuracble:true | false, 6 enumerable:true | false 7 }) 8 //当前使用了setter和getter方法,不许使用writable和value两个属性
当设置获取对象的某个属性的时候,可以提供getter和setter方法
1 var obj = {}; 2 var value = ‘xixi‘; 3 object.defineProperty(obj, ‘name‘, { 4 get: function() { 5 return value 6 }, 7 set: function(val) { 8 value = val 9 } 10 }) 11 console.log(obj.name) // xixi 12 obj.name = ‘西瓜‘; 13 console.log(obj.name) // 西瓜
原文地址:https://www.cnblogs.com/mxyr/p/9507043.html
时间: 2024-11-05 19:43:11