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