JS原生数据绑定原理

用过vue的人都知道,vue有一个特别好用的数据绑定,只要绑定了,你只要改变了这个数据,页面也会跟着渲染。其实原生的JS也是可以做到的,vue其实就是用了原生的原理。

Object.defineProperty,语法是Object.defineProperty(obj, prop, descriptor)

obj:就是一个对象;

prop:就是你要监听的obj里面的某个数据;

descriptor:目标属性所拥有的特性;

这三个都是必须的,前两个都好理解,第三个,说简单点就是这个方法自带的几个特性:Value、writable、enumerable、configurable和getter、setter,其中,getter、setter和Value、writable是不能一起用的。

configurable:true或false,属性是否能删除和再次设置,默认false;

enumerable:true或false,属性是否能枚举,默认false;

value:任意类型的值,默认undefined;

writable:true或false,属性是否能被重写,默认false;

value:

var obj = {}-------每个方法都要有,下面例子就不一一声明

//不设置value属性

Object.defineProperty(obj,"val",{

});

console.log( obj.val ); //输出undefined

//设置value属性

Object.defineProperty(obj,"val",{

value:"hello"
复制代码

});

console.log( obj.val ); //输出hello

Writable:

//writable设置为false,不能重写。

Object.defineProperty(obj,"val",{

value:"hello",

writable:false
复制代码

});

obj.newKey = "change";

console.log(obj.val); //输出hello

//writable设置为true,可以重写

Object.defineProperty(obj,"val",{

value:"hello",

writable:true
复制代码

});

obj.val = "change";

console.log(obj.val); //输出change

enumerable:

//enumerable设置为false,不能被枚举。

Object.defineProperty(obj,"val",{

value:"hello",

enumerable:false
复制代码

});

for( var val in obj ){

console.log( val );  //输出空
复制代码

}

//enumerable设置为true,可以被枚举。

Object.defineProperty(obj,"val",{

value:"hello",

enumerable:true
复制代码

});

//枚举对象的属性

for( var val in obj ){

console.log( val );  //输出val
复制代码

}

configurable:

//configurable设置为false,不能被删除。

Object.defineProperty(obj,"val",{

value:"hello",

configurable:false
复制代码

});

//删除属性

delete obj.val;

console.log( obj.val ); //输出hello

//configurable设置为true,可以被删除。

Object.defineProperty(obj,"val ",{

value:"hello",

configurable:true
复制代码

});

//删除属性

delete obj.val ;

console.log(obj.val); //输出undefined

//configurable设置为false,不能再次修改特性。

Object.defineProperty(obj,"val",{

    value:"hello",

    configurable:false

});



//重新修改特性

Object.defineProperty(obj,"val",{

    value:"hello",

    configurable:true

});

console.log(obj.val); //报错:Uncaught TypeError: Cannot redefine property: val
复制代码

//configurable设置为false,不能再次修改特性。

Object.defineProperty(obj,"val",{

value:"hello",

configurable:true
复制代码

});

//重新修改特性

Object.defineProperty(obj,"val",{

value:"hello",

configurable:false
复制代码

});

console.log(obj.val); //输出hello

现在说说最重要的getter和setter方法,数据绑定的主要方法。

当我们监听input的键盘事件的时候,只要input里面的值改变了,只要obj.hello 赋值,就会触发set方法,这时候我们就可以在里面操作改变页面。只要调用obj.hello,就会触发get方法,这时候打印出来的obj.hello一直等于3,因为我们return的就是3,所以这边应该返回改变的值。这时候估计很多人会觉得都是监听,那还不如直接写在input的监听事件里面,其实不是的,只要你调用了obj.hello,页面的值就会变化。就像obj.hello = 999;那么页面的值就会是999;感兴趣的可以复制代码的方法,一个一个方法调用,就很容易明白原生JS的双向绑定。

欢迎关注 Coding 个人笔记 公众号

转载于:https://juejin.im/post/5c4716ea51882523d32034a4

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值