vue响应式reactive源码学习笔记之Proxy初认识。

序言：vue3即将成为vue的默认版本，并且辞去工作之后也有了时间安心学习，所以准备在找工作之前从vue3的源码中学习vue的设计思想并且重新学习一些ts的相关知识。

Proxy(代理) —— 是es6中新添加的内建对象。使用时用new构建，其接受两个对象参数 target（目标对象） 和 handler（处理程序）。

Proxy可以拦截JavaScript引擎内部目标底层的对象操作，这些操作被拦截后会触发特定函数。在vue3新建一个reactive可以看到，他对get，set，has，onwKeys，deleteProperty这几个方法进行了重写。

这一点从reactive的源码中也可以看出,定义了createGetter，createSetter等函数，当然重点也是get与set函数。

Reflect(反射)，拥有的静态函数与proxy的handler中的钩子函数完全相同，当触发proxy中的钩子函数时即可用Reflect的静态方法对目标对象进行相应操作。如果失败会返回false，成功返回true（get操作返回相应值）。当然对于数据进行验证与操作放在return Reflect之前。

const get = createGetter();

function createGetter() {
    return function get(target, property, receiver) {
        return Reflect.get(target, property, receiver)
    }
};

const set = createSetter();

function createSetter() {
    return function set(target, key,value, receiver) {
        return Reflect.set(target, key, value, receiver);
    }
};

let handler = {
    get,
    set
};

let target = { age: 18 };

let proxy = new Proxy(target, handler);

console.log(proxy.age);

其他操作方法同理，这样我们就能在对对象进行操作之前进行自定义的操作，以达到比如隐藏属性，只读不可删除等操作。