简易双向绑定

最新推荐文章于 2024-05-18 17:11:58 发布

如果决定要走又何必挽留

最新推荐文章于 2024-05-18 17:11:58 发布

阅读量599

点赞数

分类专栏： Vue 文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/qq_59076775/article/details/127362431

版权

Vue 专栏收录该内容

59 篇文章 7 订阅

订阅专栏

本文介绍了JavaScript中实现双向数据绑定的原理，通过监听input事件并利用Object.defineProperty的get和set方法，当输入框值变化时，实时更新页面显示，实现了数据和视图的同步。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="input" />
    <p id="p"></p>
  </body>
  <script>
    let input = document.getElementById("input");
    let p = document.getElementById("p");
    var obj={}
    Object.defineProperty(obj,'name',{
      get:function(){
         return val
      },
      set:function(val){
        console.log('我被访问了');
        input.value=val
        p.innerHTML=val
  
      }
    })

  input.addEventListener("input", function (e) {
       obj.name=e.target.value
    });
    
 
  </script>
</html>

实现的思路:

1.通过input事件监听输入框的值变化,并且赋值给劫持的obj.name属性

2.通过set函数获取到改变的值，形成了双向绑定

get的访问时机

代码：

const obj={}
    let v=null
    Object.defineProperty(obj,'a',{
      get:function(){
        // console.log('我被读取了');
        return 123
       
      },
      set:function(){}  //赋值触发
    })
    console.log(obj.a); //读取触发

当有人访问了劫持的属性，就会触发get函数。

如果没有返回值则返回的是underfined