浅析vue的双向数据绑定

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时，不会显示值
}

 

 

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) // 西瓜