浅析vue的双向数据绑定

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 }

View Code