Vue双向绑定实现原理
发布于2021-03-13 18:53 阅读(1113) 评论(0) 点赞(9) 收藏(3)
实现双向绑定需要Object.defineProperty，需要了解劫持对象的属性后获取对象的属性会触发get函数，更改对象属性值会触发set函数
<div id="demo"></div>
<input type="text" id="inp">
let obj = {}
let demo = document.getElementById("demo")
let inp = document.getElementById("inp")
Object.defineProperty(obj, 'name', {
get() {
console.log('已获取')
return val
},
set(val) {
console.log('已赋值')
demo.innerHTML = val
}
})
inp.addEventListener('input', e => {
obj.name = e.target.value
})
以上代码在input框输入内容时会给obj.name赋值就会触发set函数
在读取name属性例如let a=obj.name就会触发get函数并将return的值赋给a
原文链接:https://blog.csdn.net/qq_43447509/article/details/114670428
所属网站分类: 技术文章 > 博客
作者：大哥你来啦
链接：http://www.qianduanheidong.com/blog/article/35732/af8ce1ce72de3f909f5d/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力