双向数据绑定的实现原理

最新推荐文章于 2025-06-10 10:04:24 发布

I-T枭

最新推荐文章于 2025-06-10 10:04:24 发布

阅读量445

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

75 篇文章

订阅专栏

介绍了Object.defineProperty可用于对象属性扩展，通过结合原生dom操作来实现双向数据绑定。同时说明了取值时会调用get，赋值时会调用set。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <input type="text" id="userName"><br>
  <span id="uName"></span>
  <script>
    var obj = {
      pwd:'123456'
    }
    Object.defineProperty(obj,'userName',{
      get:function(){
        console.log('get init')
      },
      set:function(val){
        console.log('set init')
        document.getElementById('uName').innerText = val
      }
    })
    document.getElementById('userName').addEventListener('keyup',function(event){
      obj.userName = event.target.value
    })
  </script>

Object.defineProperty用于对象属性的扩展，结合原生dom操作，实现双线数据绑定。