Vue实现双向数据绑定-优快云博客

本文链接：https://blog.youkuaiyun.com/CSSAJBQ_/article/details/123319034

本文介绍了数据双向绑定的概念，它是通过数据劫持和发布订阅模式来同步数据和视图的状态。核心在于JavaScript的Object.defineProperty()方法，该方法用于定义对象属性，并允许我们在属性被访问或修改时执行自定义操作。在示例中，当输入框的值改变时，标题也会相应更新，反之亦然，展示了数据双向绑定的工作机制。

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

实现数据双向绑定

<input type="text" id="ipt" value="" oninput="changeData(this.value)">
<h2 id="title"></h2>

<script>
    var data = {};
    var title = document.getElementById("title");
    var ipt = document.getElementById("ipt");


  	// 定义对象属性
    Object.defineProperty(data, "msg", {
        get: function(){
            return "你好世界"
        },
        set: function(newValue){	// 自动捕获被修改后最新的值
            title.innerHTML = newValue;
          	ipt.value = newValue;
        }
    })
  
  	// 初始化值
  	title.innerHTML = data.msg;
  	ipt.value = data.msg;
  
  	// 拿到input的数据，修改msg，当msg修改时，会触发set方法
    function changeData(value){
        data.msg = value;
    }
</script>

1、原理

通过 数据劫持 结合 发布订阅模式 的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

2、核心

核心是 Object.defineProperty()方法；

3、介绍一下Object.defineProperty()方法

Object.defineProperty(obj, prop, descriptor) ,有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）
当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又使用了它里面的set方法；