携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

在第四章中，作者讲述了Vue.js中响应式系统的设计与实现，这一块其实是整个框架的基石，也是MVVM中，ViewModel(VM)的重要组成部分。其实在上一章中我已经感觉很难了，有一些操作作者也只是几笔带过，却很值得我们思考。这一张中，我们将目光着重于响应式数据本身，来完善上一章中我们的demo。

5.1 理解Proxy与Reflect

vue3的响应式离不开Proxy,说到Proxy则离不开Reflect.这两个对象是ES6新增的对象，同时在编程领域，他们也代表着2种设计模式，即代理与反射。设计模式都是后话，等我学会了也一定写一篇文章分享一下🤪.

Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须经过这层拦截，而我们就可以通过这层拦截去改变目标对象的内容或者行为，或者叫过滤和控制。这个词本意就是代理，好比一个代理人站在神奇，我们所有行为都会被他过滤，可能我们说的话，经过代理人一说，意思就变了。

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

其中target表示要代理的那个对象，handler则是表示我们需要拦截的行为,这里直接放一张阮一峰的截图。

Reflect中文译为：反射。如果说Proxy 是有一个代理人站在身前面，帮你拦截并处理一些行为，那么Reflect就是你身后的一面镜子，它能看见真实的自己。而你自己，就是一个类或者对象，或者一个函数，只要是js中存在的，都能被Proxy 和 Reflect处理。

它的操作和Proxy正好相反，但却一一对应。比如我们获取对象中一个属性。

const obj = {foo:1}
const a = Reflect.get(obj, 'foo')

这一小节主要是介绍了Proxy与Reflect，后面会有一个应用老告诉你为什么Proxy与Reflect与响应式数据息息相关。