Vue2

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

关于vue实现双向数据绑定，其核心是Object.defineProperty()方法

Object.defineProperty(obj , prop , descriptor)这个语法内有三个参数，分别是

• obj（要定义其上属性的对象）

• prop （要定义或修改的属性）

• descriptor （具体的改变方法）

就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值的时候，又用到了它里面的set方法

var obj = {};
Object.defineProperty(obj,'hello',{
  get: function(){
    console.log('调用了get方法')
  },
  set: function(newValue){
    console.log('调用了set方法，方法的值是' + newValue);
  }
});
obj.hello; // => '调用了get方法'
obj.hello = 'hi'; // => '调用了set方法，方法的值是hi'

<script>
    let input = document.querySelector('input')
    let p = document.querySelector('p')
    let obj = {}
    let value = ''
    Object.defineProperty(obj, 'inputvalue', {
        get() {
            return value
        },
        set(newValue) {
            input.value = newValue
            p.innerHTML = newValue
        }
    })
    // 订阅者 DOM元素
    input.value = obj.inputvalue
    p.innerHTML = obj.inputvalue
    // 监听输入的事件
    input.addEventListener('keyup', function (e) {
        // 修改inputvalue 达到修改input.value 以及input.innerHTML
        // 发布者
        obj.inputvalue = e.target.value // 触发了set
    })
</script>

在我们的代码中，订阅者就是页面中的DOM元素，因为他会订阅我们的inputvalue，而发布者就是监听事件中的数据，一旦监听到了数据有修改，就要发布给我们的订阅者。

就是说输入的数据一旦发生了变化，我们的页面DOM元素的数据也会发生变化，所以这个中间件就是Object.defineProperty中的set方法。

Vue3

在目标对象架设一层“拦截”，当外界对该对象进行访问时，需要经过这层拦截，而Proxy充当这种机制，类似于“代理”的意思，可以在外界访问该对象前进行过滤和修改