proxy原理

在vue3中，我们是如何去实现数据的响应式的呢？是否还会像vue2那样使用 Object.defineProperty 去进行数据的劫持然后通过订阅者模式去进行视图的更新了？下面让我这个小白为大家来讲解一下！有不对的地方，欢迎大家来及时的纠正。

首先，在vue3中，实现数据的响应式和vue2是不同的，它不再使用 Object.defineProperty 这个方法去进行数据的劫持了（具体原因可参考 https://developer.aliyun.com/article/986896）。而是使用了ES6里面的Proxy代理。

Proxy在ES6里写道，Proxy相当于在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。所以，在vue3中使用Proxy代理去实现数据的响应式要比vue2的要全面一些。

具体的使用步骤：

（1）用法：new Proxy(要代理的对象，处理的方法)，

（2）上截图

注意 handler 函数里的get方法与set方法里的参数都代表这什么

这是get方法里的：

target代表的是被代理的对象，也就是person这个对象

prop代表的是被代理的对象里的键，也就是person这个对象里的name这个键

receiver代表的是proxy实例本身

这是set方法里的：

target代表的是被代理的对象，也就是person这个对象

prop代表的是被代理的对象里的键，也就是person这个对象里的name这个键

receiver代表的是proxy实例本身

注意了，并不是所有的代理都会走handler函数里的get和set这两个方法，

如果不去改变被代理的对象的值得话，是不会走handler函数里的set方法的，只会handler函数里的get方法的。反之的话，会走handler函数里的get和set这两个方法。大家一定注意了。

上面就是我总结的，如果有不对的地方，可以来评论指出我的不足！！！