vue2 和 vue3 双向绑定数据原理

vue2 Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

每次劫持数据，都会层层遍历，影响性能，数组劫持数据，能劫持到push、pop、shift、unshift、等数组操作方法。

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

object1.property1 = 77;
// throws an error in strict mode

console.log(object1.property1);
// expected output: 42

• MDN 传送门：https://developer.mozilla.org/zh-CN

vue3 proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

可直接监听数组类型的数据变化性能的提升监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升可直接实现对象属性的新增/删除；

• 文字传送门：https://blog.csdn.net

• 传送门：https://blog.csdn.net/m0_64969829/article/details/123047804