加载中...
PAGE

js 了解Object.defineproperty并实现简易版vue的双向绑定

Post on 2021-10-27 9 0

Object.defineproperty用于对对象添加或修改一个已有的属性(如果他是configurable)并对特性进行设置
举个栗子(该栗子仅仅是列举出Object.defineProperty所有属性):

var obj = {} var demo = null; Object.defineProperty(obj,"a",{ value: 2, //值 writable: true, //写入 configurable: true, //配置 enumerable:true, //枚举 是否可以循环 get: function(){ //获取时方法 return demo }, set: function(value){ //赋值时方法 demo = value } })

具体参数的含义以及使用方法直接看看这个吧
MDN Object.defineProperty

这里使用该方法实现一个简易的vue双向绑定,实现原理是使用set进行数据的监听

代码如下:

<input id="inputs" type="text" > <span id="sp"></span> <script> var inputs = document.getElementById("inputs"), span = document.getElementById("sp"), obj = {}; Object.defineProperty(obj,"msg",{ set: function(value){ inputs.value = value span.innerHTML = value } }) inputs.addEventListener('keyup',function(event){ obj.msg = event.target.value }) </script>

效果如下,输入框输入的时候,对应span的内容也会跟着变化
实现

js 常用属性和方法等知识汇总

js 常用属性和方法等知识汇总

阅读更多
js 10分钟学会隐式转换

js 10分钟学会隐式转换

阅读更多
js 实现简易版深拷贝

js 实现简易版深拷贝

阅读更多

暂无评论

    发表评论
    返回顶部
    X