Vue实现双向数据绑定

实现数据双向绑定

<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方法；