vue 的双向数据绑定是基于 es5 的 object 对象的 defineProperty 属性, 重写 data 的 set 和 get 函数来实现的.
1,defineProperty 数据展示
- Object.defineProperty(obj,'name',{
- configurable:true , // false 则不可以删除 key 值
- enumerable:true , // false 则在枚举时候会忽略
- value:'xixi'
- writable:true // false 则不可更改 key 的 value 值
- });
- //writable 为 false
- var obj = {};
- Object.defineProperty(obj,'name',{
- value:'xixi'
- writable:false,
- configurable:true ,
- enumerable:true ,
- });
- obj.val = '西瓜';//writable 为 false, 不可以更改.
- //configurable 为 false
- var obj = {};
- Object.defineProperty(obj,'name',{
- value:'xixi'
- writable:true,
- configurable:false ,
- enumerable:true ,
- });
- obj.val = '西瓜';
- delete obj.val //configurable 为 false, 不可以删除.
- //enumerable 为 false
- var obj = {};
- Object.defineProperty(obj,'name',{
- value:'xixi'
- writable:true,
- configurable:true ,
- enumerable:false ,
- });
- for(var i in obj) {
- console.log(obj[i]) // enumerable 为 false 时, 不会显示值
- }
- View Code
2, 存取器描述
- var obj = {};
- Object.defineProperty(obj,'name',{
- get:function(){} | undefined,
- set:function(){} | undefined,
- configuracble:true | false,
- enumerable:true | false
- })
- // 当前使用了 setter 和 getter 方法, 不许使用 writable 和 value 两个属性
当设置获取对象的某个属性的时候, 可以提供 getter 和 setter 方法
- var obj = {};
- var value = 'xixi';
- object.defineProperty(obj, 'name', {
- get: function() {
- return value
- },
- set: function(val) {
- value = val
- }
- })
- console.log(obj.name) // xixi
- obj.name = '西瓜';
- console.log(obj.name) // 西瓜
来源: http://www.bubuko.com/infodetail-2735347.html