vue2使用Object.defineProperty来劫持对象属性，而vue3使用Proxy代理来实现双向绑定。

Vue2

vue2数据双向绑定是由数据劫持结合发布-订阅的模式实现的。Object.defineProperty()这个方法是直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象，相当于劫持对象属性，在里面可以定义settter与getter寄存器属性，使用get与set进行操作，这样我们就实现了vue2的双向绑定。在vue2.0里通过递归+遍历对象来实现对数据的监控的，如果属性值是对象的话，还需要深度遍历。

<div class="data"></div>
<label>vue2:</label> <input type="text" class="dataInput" />

var data={}
Object.defineProperty(data, "value",{
  get(){
    return this._value //返回一个私有属性_value
  },
  set(value){
    document.querySelector(".data").innerText = value; //当data.value改变时候 将结果填入html中
  }
})

//监听输入 data.value改变为输入的值
document.querySelector(".dataInput").oninput = (e) => {
  data.value = e.target.value;
};

Vue3

vue3的双向绑定原理与vue2的差不多，不过使用ES6的Proxy代理来实现的。Proxy可以直接监听对象和数组的变化。

<div class="data2"></div>
<label>vue3:</label>
<input type="text" class="data2Input" />

var data2 = {};
data2 = new Proxy(data2, {
  get(target, key) {
    return target[key];
  },
  set(target, key, value) {
    document.querySelector(".data2").innerText = value;
  },
});

document.querySelector(".data2Input").oninput = (e) => {
  data2.name = e.target.value;
};

异同

相同

• 数据劫持结合发布-订阅的模式实现的

不同

• Object.defineProperty的兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。
• Object.defineProperty需要定义对象各个属性定义的set与get方法；Proxy可以定义对象所有属性的get与set，Proxy 返回的是一个新对象。
• Object.definePropert只能监听对象的属性，无法监控数组内部数据的变化，当我们使用数组的方法或改变数组的下标是不能重新触发 Object.defineProperty中的set()方法。