数据双向绑定的原生写法原理

最新推荐文章于 2024-10-26 15:02:19 发布

maple_leaf1314

最新推荐文章于 2024-10-26 15:02:19 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/Maple__Leaf_/article/details/107552110

本文介绍了一种使用JavaScript实现的双向数据绑定机制，通过对象数据劫持的方法，实现了输入框值与页面元素内容的实时同步更新。该机制利用了`Object.defineProperty`来监听数据变化，并在数据改变时自动更新视图。

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

<body>
    <input type="text" name="" id="">
    <div></div>
    <script>
        let input = document.querySelector('input')
        let box = document.querySelector('div')
        var data = {
            name: ''
        }
        
        // 对象的数据劫持方法
        Object.defineProperty(this.data, 'name', {
           
        //    获取截取的数据
            get() {
                // 返回出去
                return input.value
            },
          
        //   将截取的数据设置给box
            set(i) {
                box.innerHTML = i
                input.value = i
            }
        })

        // 监听输入框键盘弹起事件
        input.addEventListener('keyup', (e) => {
            this.data.name = e.target.value
        })
    </script>
</body>