码迷,mamicode.com
首页 > 其他好文 > 详细

浅析vue的双向数据绑定

时间:2018-08-20 18:57:35      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:枚举   data   config   bsp   重写   忽略   ide   hide   property   

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

 

浅析vue的双向数据绑定

标签:枚举   data   config   bsp   重写   忽略   ide   hide   property   

原文地址:https://www.cnblogs.com/mxyr/p/9507043.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!