本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-03(364)

2021-04(182)

2021-05(181)

2021-06(95)

2021-07(12)

Vue双向绑定实现原理

发布于2021-03-13 18:53     阅读(586)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

9 0
收藏该文
已收藏

评论内容:(最多支持255个字符)