自己实现双向绑定机制（未完成）

最新推荐文章于 2022-06-18 11:59:03 发布

原创最新推荐文章于 2022-06-18 11:59:03 发布 · 487 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#双向绑定 #前端

前端专栏收录该内容

32 篇文章

订阅专栏

本文探讨了双向绑定在简化数据管理中的作用，通过Object.defineProperty展示了基础的双向数据同步示例，并对比了Vue2的观察者模式。

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

为什么要双向绑定？

使用双向绑定之后，建立起了数据层和视图层之间的联系，让我们可以更专注于处理数据层的逻辑，不必在每次更新数据后手动的更新视图。

使用Object.defineProperty实现一个最基础的双向绑定demo

下面的代码使用了Obejct.defineProperty实现了一个最基础的双向绑定示例程序，在输入框中编辑内容之后，输入框下面的label中的内容也会动态更新。这只是一个双向绑定的toydemo，vue2中的双向绑定使用了观察者模式，维护起来更加方便。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>双向绑定</title>
</head>

<body>
    <input type="text" id="model"><br />
    <div id="modelText"></div>
</body>
<script>
    // view
    var model = document.querySelector("#model");
    var modelText = document.querySelector("#modelText");
    
    // data
    var defaultName = "defaultName";
    var userInfo = {}
    
    Object.defineProperty(userInfo, "name", {
        get: function () {
            return defaultName;
        },
        set: function (value) {
            // defaultName = value;
            // updateView
            model.value = value;
            modelText.textContent = value;
        }
    })

    // userInfo.name = "new value";
 
  model.addEventListener("keyup", function () {
    userInfo.name = this.value;
  }, false)
</script>

</html>