proxy和defineProperty区别

一 mutable概念

        在这之前，首先我们解下mutable

        mutable表示为可变类型的对象。提供了可以改变其内部数据值的操作，其内部的值可以被重新更改。

        vue以可变数据源为核心的理念，来实现整个UI变动更新

	mutable(可变类型)	immutable(不可变类型)
优点	减少数据拷贝次数，效率更高	内部数据不可变导致更安全，可以用作多线程的共享对象，不必考虑同步问题
缺点	内部数据可变，导致风险更大	内部数据不可变，频繁的修改会产生大量临时拷贝浪费空间

        用最简单的讲法就是：初始化数据生成了页面，直接修改源数据触发更新，页面重新渲染

二 defineProperty

        在使用vue2的时候，我们经常会碰到一个问题，添加新的对象属性obj.a = 1会无法被vue2劫持，必须使用vue2提供的$set方法来进行更新。

         因为当我们给a对象新增一个属性的时候，虽然在对应的对象上成功的生成一个新的属性，但是vue2是通过defineProperty的setter与getter进行数据劫持的，新增的数据并没有被劫持，所以无论怎么更新，页面依旧不会重新渲染

        (这个的原因是defineProperty只能对当前对象的其中一个属性进行劫持)

const a = {
    b: 1,
};
Object.defineProperty(a, 'b', {
    set: function() {},
    get: function() {},
});

三 proxy

        在vue3中，使用proxy来进行数据代理就完全没有这个顾虑

        proxy对于数据的代理，能够响应新增的属性，当新增一个属性的时候，可以响应到get中，对当前对象进行代理

const p = new Proxy({
    a: 1,
    b: 2,
}, {
    get: function(obj, value) {
        console.log('get', obj, value);
        return Reflect.get(obj, value);
    },
    set: function(obj, prop, value) {
        console.log('set', obj, prop, value);
        return Reflect.set(obj, prop, value);
    },
})