Vue双向数据绑定简易理解版

最新推荐文章于 2026-08-22 22:10:06 发布

原创最新推荐文章于 2026-08-22 22:10:06 发布 · 214 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文深入探讨了双向数据绑定的实现机制，通过实例演示了如何使用JavaScript的Object.defineProperty方法实现数据与视图的实时同步更新。这在现代前端框架如Vue中是核心特性，确保了数据与UI的一致性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <div></div>
</body>
<script>
    // 双向绑定：数据，视图，当视图变化,数据变;数据变,视图变
    const ipt = document.querySelector("input");
    const div = document.querySelector("div");
   //视图视图的变化可以轻易通过oninput事件来实现
   /*  ipt.oninput = function () {
        div.innerText = this.value;
    }*/
   
   //但是Vue中是数据与视图的双向绑定
   //需要通过 Object.defineProperty()方法实现
    let data = {
        str: "你还好吗?",
    }
    let str = data.str;
    //当改变data中的str数据时 会发生拦截
    Object.defineProperty(data, "str", {
        get() {
        //获取data中的str数据时 触发
            return str
        },
        set(v) {
        //v 是改变之后的值
       // 当改变data中的str数据时 触发
            str = div.innerText = ipt.value = v
            console.log(111111, this === data)
            //此时的this是拦截的对象
        }
    })
    div.innerText = ipt.value = str;
    ipt.oninput = function () {
        data.str = this.value;
    }
</script>

</html>