浅析vue的双向数据绑定

Posted 2020-12-31 mxyr

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

 

 

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