Vue双向数据绑定

vue2使用Object.defineProperty，而vue3使用ES6的Proxy代理替代。

Vue2

vue2数据双向绑定是由数据劫持结合发布-订阅的模式实现的。利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。在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代理替代了Object.defineProperty。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需要定义对象每个属性对应的set与get方法；Proxy可以定义对象所有属性的get与set，Proxy 返回的是一个新对象。
• Object.definePropert只能监听对象的属性，无法监控数组内部数据的变化，当我们使用数组的方法或改变数组的下标时不能触发 Object.defineProperty中的set()方法。
• Object.defineProperty的兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题，而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。