学习 Vue3 的响应式原理
是不是感觉有点复杂？事实上，在上面的讲述中，我们还有问题没有解决：那就是当我们要给对象新增加一个属性时，也需要手动去监听这个新增属性。
也正是因为这个原因，使用 vue 给 data 中的数组或对象新增属性时，需要使用 vm.$set 才能保证新增的属性也是响应式的。
可以看到，通过 Object.definePorperty() 进行数据监听是比较麻烦的，需要大量的手动处理。这也是为什么在Vue3.0中尤雨溪转而采用Proxy。接下来让我们一起看一下Proxy是怎么解决这些问题的吧！
1. 基本使用
语法：const p = new Proxy( target, handler );
参数：
target:要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）
handler:一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。
通过Proxy，我们可以对设置代理的对象上的一些操作进行拦截，外界对这个对象的各种操作，都要先通过这层拦截。（和defineProperty差不多）
一起先看一个简单的例子
<script type="text/javaScript"> // 定义一个需要代理的对象 let person = { name:'Barry', age:22 } let p = new Proxy(person,{ get(target,key){ return target[key] }, set(target,key,val){ return target[key] = val; } }) console.log(p); //测试 get 是否可以拦截成功 console.log(p.name); // 输出 Barry console.log(p.age); // 输出 22 console.log(p.job); // 输出 undefined //测试 set 是否可以拦截成功 p.age = 18 console.log(p.age); </script>
可以看出，Proxy代理的是整个对象，而不是对象的某个特定属性，不需要我们通过遍历来逐个进行数据绑定。
值得注意的是:之前我们在使用Object.defineProperty()给对象添加一个属性之后，我们对对象属性的读写操作仍然在对象本身。
但是一旦使用Proxy，如果想要读写操作生效，我们就要对Proxy的实例对象 p 进行操作。
2.解决Vue2 Object.defineProperty中遇到的问题
在上面使用Object.defineProperty的时候，我们遇到的问题有：
1.一次只能对一个属性进行监听，需要遍历来对所有属性监听。这个我们在上面已经解决了。
2. 在遇到一个对象的属性还是一个对象的情况下，需要递归监听。
3. 对于对象的新增属性，需要手动监听
4. 对于数组通过push、unshift方法增加的元素，也无法监听
这些问题在Proxy中都轻松得到了解决，让我们看看以下代码。
一起检验第二个问题
<script type="text/javaScript"> // 定义一个需要代理的对象 let person = { name:'Barry', age:22, job:{ city:'ShenZhen', salary:50 } } let p = new Proxy(person,{ get(target,key){ return target[key] }, set(target,key,val){ return target[key] = val; } }) console.log(p); //测试 get console.log(p.job); console.log(p.job.city); console.log(p.job.salary); //测试 set p.job.salary = 60 console.log(p.job); </script>
可以看到成功的监听到了 person 对象里的 job 对象，job 的所有属性都可以被成功监听到
一起检验第三个问题
console.log(p); //测试 get console.log(p.job); console.log(p.job.type); //测试 set p.job.type = 'Web' console.log(p.job);
用这几行代码已经可以成功的测试出来，访问的 p.job.type 就是原对象上不存在的属性，但是我们访问它的时候，仍然可以被 get 拦截到。
一起检验第四个问题
<script type="text/javaScript"> let hobby = ['学习','看书','听歌']; let h = new Proxy(hobby,{ get(target,key){ return target[key] }, set(target,key,val){ return target[key] = val } }) //检验 get 和 set console.log(h) // 输出 Proxy {0: '学习', 1: '看书', 2: '听歌'} console.log(h[0]) // '学习' h[0] = '游泳'; console.log(h); // Proxy {0: '游泳', 1: '看书', 2: '听歌'} // 检验push增加的元素能否被监听 h.push('爬山') console.log(h); // 输出 Proxy {0: '游泳', 1: '看书', 2: '听歌', 3: '爬山'} </script>
在这，我们已经把 Vue2 遇到的问题都完美解决了！这里我们对 Proxy 的解析并不是十分全面，细心的同学在阅读 Proxy 的 MDN 文档上可能会发现其实 Proxy 中 get 陷阱中还会存在一个额外的参数 receiver 。这个感兴趣的朋友可以去查阅一番文档，这里就不详细介绍了。
3. Vue3 的双向绑定真的是这样写的吗？
其实并不是这样，Vue3 的响应式是通过 Proxy(代理) 配合 Reflect(反射) 进行设计的，为什么要这样设计呢？我们一起往下看
Proxy && Reflect 基础使用
<script type="text/javaScript"> let person = { name:'Barry', age:22, job:{ city:'ShenZhen', salary:30 } } let handler = { get(target,key,receiver){ return Reflect.get(target,key,receiver) }, set(target,key,val){ Reflect.set(target,key,val) }, deleteProperty(target,key){ return Reflect.deleteProperty(target,key) } } let p = new Proxy(person,handler); console.log(p.name); // 输出 Barry console.log(p.job.salary); // 输出 30 p.job.salary = 50; console.log(p.job.salary); // 输出 50 delete p.job console.log(p); // 输出Proxy {name: 'Barry', age: 22} </script>
上面只是我们一个粗糙的实现。想到这里可能有不熟悉的朋友就会问了：
什么是 Reflect ？
Reflect 其实和 Proxy 一样都是属于 ES6 的高级API，Reflect 也是属于 window 的一个内置类，可以通过 window.Reflect 访问到，看下图
4. 为什么 Proxy 要配合 Reflect 一起使用
①触发代理对象的劫持时保证正确的 this 上下文指向
上边的 Demo 中一切都看起来顺风顺水没错吧，细心的同学在阅读 Proxy 的 MDN 文档上可能会发现其实 Proxy 中 get 陷阱中还会存在一个额外的参数 receiver 。
那么这里的 receiver 究竟表示什么意思呢？大多数同学会将它理解成为代理对象
<script type="text/javaScript"> const person = { name:'Barry', age:22 } const p =new Proxy(person,{ // get陷阱中target表示原对象 key表示访问的属性名 get(target, key, receiver) { console.log(receiver === p); return target[key]; }, }) </script>
上述的例子中，我们在 Proxy 实例对象的 get 陷阱上接收了 receiver 这个参数。
同时，我们在陷阱内部打印 console.log(receiver === proxy); 它会打印出 true ，表示这里 receiver 的确是和代理对象相等的。
那么你可以稍微思考下这里的 receiver 究竟是什么呢？ 其实这也是 proxy 中 get 第三个 receiver 存在的意义。
它是为了传递正确的调用者指向
通过我们上述对 window.Reflect 的打印可以看到，Reflect 的方法、属性和 Proxy 是一样的，所以 Reflect get 也是有这 第三个 receiver 属性的；
<script type="text/javaScript"> const person = { name:'Barry', age:22 } const p =new Proxy(person,{ // get陷阱中target表示原对象 key表示访问的属性名 get(target, key, receiver) { console.log(receiver === p); return Reflect.get(target,key,receiver) }, }) console.log(p.name); </script>
上述代码原理其实非常简单：
我们在 Reflect 中 get 陷阱中第三个参数传递了 Proxy 中的 receiver 也就是 obj 作为形参，它会修改调用时的 this 指向。
你可以简单的将 Reflect.get(target, key, receiver) 理解成为 target[key].call(receiver)，不过这是一段伪代码，但是这样你可能更好理解。
相信看到这里你已经明白 Relfect 中的 receiver 代表的含义是什么了，没错它正是可以修改属性访问中的 this 指向为传入的 receiver 对象。
②框架健壮性
为什么会说道框架的健壮性呢？我们一起看一段代码
<script type="text/javaScript"> const person = { name:'Barry', age:22 } Object.defineProperty(person,'height',{ get(){ return 180 } }) Object.defineProperty(person,'height',{ get(){ return 170 } }) </script>
看一下浏览器运行环境
我们可以看到，使用 Object.defineProperty() 重复声明的属性 报错了，因为 JavaScript 是单线程语言，一旦抛出异常，后边的任何逻辑都不会执行，所以为了避免这种情况，我们在底层就要写 大量的 try catch 来避免，不够优雅。
我们来看一下 Reflect 会是什么情况？
<script type="text/javaScript"> const person = { name:'Barry', age:22 } const h1 = Reflect.defineProperty(person,'height',{ get(){ return 180 } }) const h2 = Reflect.defineProperty(person,'height',{ get(){ return 175 } }) console.log(h1); // true console.log(h2); // false console.log(person); //age: 22,name: "Barry",height: 180 </script>
我们可以看到使用 Reflect.defineProperty() 是有返回值的，所以通过 返回值 来判断你当前操作是否成功。
结语：
这里就到文章的结尾了，可能你很多地方还是懵懵懂懂，不妨打开电脑，一起敲一敲，试一试，可能会很有帮助；
其次文中很多地方讲解的不够细致，所以也会导致你对整体理解不是特别清晰，我争取早日完善；
最后谢谢每一位观看的小伙伴，一起加油~~~
