Vue3.0和Vue2.x中的响应式原理是什么？有什么区别？

vue2.x的响应式原理

通过Object.defineProperty()对属性的读取、修改进行拦截在结合发布者和订阅者模式的方式来实现

Vue3.0的响应式原理

通过proxy代理进行数据劫持

区别：

// defineproperty
var list = [1, 2, 3];
list.map((item, index) => {
    Object.defineProperty(list, index, {
        get() {
            return item;
        },
        set(val) {
            item= val;
        }
    });
});
// set可以监听到但是无法在页面是进行更新
list.push(4)
list[3] = 5

// porxy
let arr= [1,2,3];
var proxyObj = new Proxy(arr, {
  get(target, propKey, receiver) {
    return Reflect.get(target, propKey, receiver);
  },
  set(target, propKey, value, receiver) {
    return Reflect.set(target, propKey, value, receiver);
  },
  // 监听属性是否删除
  deleteProperty: function (target, propKey) {
    delete target[propKey];
    return true;
  },
});
// 监听到数组元素变化页面并更新
proxyObj[1] = 2.1;
proxyObj.push(4);
proxyObj.length = 5;

1.defineproperty只能检查对象中单一属性的改变 而proxy可以检查整个对象的改变并返回一个新的对象
2.defineproperty 无法检查到对象的增加和删除 而proxy可以检查到对象中的值的变化不但能监听到属性的增加 也可以监听属性的删除
3.defineproperty 无法检查到数组的变化 需要进行数组方法的重写 而 proxy可以监听数组下标和数组长度的变化
4.defineproperty 无法检数组长度的变化

proxy 本身就是一个构造函数对象 proxy相比于defineproperty劫持莫个属性 proxy则更加彻底 不在局限某个属性，而且直接对整个对象进行代理 proxy可以理解为在每个对象访问前加一个拦截 想要访问对象必须要经过proxy这层拦截