devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue3中的响应式原理，为什么使用Proxy(代理) 与 Reflect(反射)？_vue reflect

作者：AllinToyou | 2024-02-25 09:41:37

赞

踩

vue reflect

前言：

        Vue3 已经出来很久了，相信大家很多都已经在使用Vue3去生产了，但是Vue3 究竟比 Vue2 好在哪里呢？今天一起深入学习一下 Vue3的响应式原理，顺便说一说 Vue3的响应式到底比Vue2的响应式好在哪里，篇幅有点长大家一起细细品味！

目录

回顾 Vue2 的响应式原理

1. 基本使用

2.监听对象上的多个属性

3.深度监听一个对象

4.监听数组

学习 Vue3 的响应式原理

1. 基本使用

2.解决Vue2 Object.defineProperty中遇到的问题

3. Vue3 的双向绑定真的是这样写的吗？ 

什么是 Reflect ？

4. 为什么 Proxy 要配合 Reflect 一起使用

①触发代理对象的劫持时保证正确的 this 上下文指向

②框架健壮性

结语：

回顾 Vue2 的响应式原理

1. 基本使用

语法：Object.defineProerty(obj, prop, descriptor)

作用：在一个对象定义一个新属性，或者修改一个对象的现有属性，并返回一个对象

参数：

  1. 要添加属性的对象

  2. 要定义或修改的属性的名称或 [Symbol]

  3. 要定义或修改的属性描述符

看一个简单的例子

  1. <script type="text/javaScript">
  2.   let person = {}
  3.   let personName = 'Barry'
  4.  
  5.   // 在 person 对象上添加属性 nameB,值为personName
  6.   Object.defineProperty(person,'nameB',{
  7.       //但是默认是不可枚举的(for in打印打印不出来)，可：enumerable: true
  8.       //默认不可以修改，可：wirtable：true
  9.       //默认不可以删除，可：configurable：true
  10.  
  11.       get(){
  12.           console.log('tigger get');
  13.           return personName
  14.       },
  15.       set(val){
  16.           console.log('trigger set');
  17.           personName = val
  18.       },
  19.   })
  20.  
  21.   //当读取person对象的nameB属性时，触发get方法
  22.   console.log(person.nameB)
  23.  
  24.   //当修改personName时，重新访问person.nameB发现修改成功
  25.   personName = 'liming'
  26.   console.log(person.nameB)
  27.  
  28.   // 对person.namep进行修改，触发set方法
  29.   person.nameB = 'huahua'
  30.   console.log(person.nameB)
  31. </script>

通过这种方式，我们成功监听了person上的name属性的变化。

2.监听对象上的多个属性

上面的使用中，我们只监听了一个属性的变化，但是在实际情况中，我们通常需要一次监听多个属性的变化。
这时我们需要配合Object.keys(obj)进行遍历。这个方法可以返回obj对象身上的所有可枚举属性组成的字符数组。（其实用for in遍历也可以)

  1. let person = {
  2.     name:'Barry',
  3.     age:22
  4. }
  5.  
  6. console.log(Object.keys(person)); 
  7. // ['name', 'age']

根据上面的 API ，我们就可以遍历劫持对象上的所有属性，但是结果我们发现并达不到效果，下面是写的一个错误版本：

  1. let person = {
  2.     name:'Barry',
  3.     age:22
  4. }
  5.  
  6. console.log(Object.keys(person));
  7. /**
  8.  * Object.defineProperty 复杂使用
  9. */
  10.  
  11. Object.keys(person).forEach(key=>{
  12.     Object.defineProperty(person,key,{
  13.         get(){
  14.             return person[key]
  15.         },
  16.         set(val){
  17.             console.log(`modify person object ${key}`);
  18.             person[key] = val
  19.         }
  20.     })
  21. })
  22.  
  23. console.log(person.age);

 看起来写的并没有问题，但是试着运行一下，你会发现和我报一样的错误---栈溢出  

这是为什么呢？

  让我们聚焦在 get 方法里面，我们在访问 person 身上的属性时，就会触发 get 方法，返回 person[key] ，但是访问 person[key] 也会触发 get 方法，导致递归调用，最终栈溢出。 

这也引出了我们下面的方法，我们需要设置一个中转 Observer，来让 get 中 return 的值并不是直接访问 obj[key]

  1. let person = {
  2.     name:'Barry',
  3.     age:22
  4. }
  5.  
  6. console.log(Object.keys(person));
  7.  
  8. /**
  9.  * Object.defineProperty 复杂使用（正确版本）
  10.  */
  11.  
  12. // 实现一个响应式函数
  13. function defineProperty(obj,key,val) {
  14.     Object.defineProperty(obj,key,{
  15.         get(){
  16.             console.log(`trigger ${key} property`);
  17.             return val
  18.         },
  19.         set(newVal){
  20.             console.log(`${key} set property ${newVal}`);
  21.             val = newVal
  22.         }
  23.     })
  24. }
  25.  
  26. // 实现一个遍历函数 Observer
  27. function observer(obj){
  28.     Object.keys(obj).forEach(key=>{
  29.         defineProperty(obj,key,obj[key])
  30.     })
  31. }
  32.  
  33. observer(person);
  34. console.log(person.name);
  35. person.age = 30;
  36. console.log(person.age);

3.深度监听一个对象

那么我们如何解决对象中嵌套一个对象的情况呢？其实可以在上述代码中加一个递归，然后利用递归来轻松实现。

我们可以观察到，其实 Observer 就是我们想要实现的监听函数，我们预期的目标是 ： 只要把对象传入其中，就可以实现对这个对象的属性监视，即使该对象的属性也是一个对象

具体代码如下：

  1. function defineProperty(obj,key,val) {
  2.     if(typeof val === 'object'){
  3.         observer(val)
  4.     }
  5.     Object.defineProperty(obj,key,{
  6.         get(){
  7.             console.log(`trigger ${key} property`);
  8.             return val
  9.         },
  10.         set(newVal){
  11.             console.log(`${key} set property ${newVal}`);
  12.             val = newVal
  13.         }
  14.     })
  15. }

当然啦，我们也要在observer里面加一个递归停止的条件:

  1. function observer(obj){
  2.     if(typeof obj !== 'object' || obj === null){
  3.         return
  4.     }
  5.     Object.keys(obj).forEach(key=>{
  6.         defineProperty(obj,key,obj[key])
  7.     })
  8. }

其实到这里就差不多解决了，但是还有一个小问题，如果对某属性进行修改时，如果原本的属性值是一个字符串，但是我们重新赋值了一个对象，我们要如何监听新添加的对象的所有属性呢？其实也很简单，只需要修改set函数：

  1. set(newVal){
  2.     console.log(`${key} set property ${newVal}`);
  3.     if(typeof val === 'object'){
  4.         observer(key)
  5.     }
  6.     val = newVal
  7. }

4.监听数组

那么如果对象的属性是一个数组呢？我们要如何实现监听？

请看下面一段代码：

  1. let hobby = ['抽烟','喝酒','烫头']
  2.     let person = {
  3.         name:'Barry',
  4.         age:22
  5.     }
  6.  
  7.  
  8. // 把 hobby 作为 person 属性监听
  9. Object.defineProperty(person,'hobby',{
  10.     get(){
  11.         console.log('tigger get');
  12.         return hobby
  13.     },
  14.     set(newVal){
  15.         console.log('tigger set',newVal);
  16.         hobby = newVal
  17.     }
  18. })
  19.  
  20. console.log(person.hobby);
  21. person.hobby = ['看书','游泳','听歌']
  22. person.hobby.push('游泳')

我们发现，通过 push方法给数组增加的元素，set方法是监听不到的。

事实上，通过索引访问或者修改数组中已经存在的元素，是可以触发get和set的，但是对于通过push、unshift增加的元素，会增加一个索引，这种情况需要手动初始化，新增加的元素才能被监听到。另外， 通过 pop 或 shift 删除元素，会删除并更新索引，也会触发 setter 和 getter 方法。

在Vue2.x中，通过重写Array原型上的方法解决了这个问题，此处就不展开说了，有兴趣的uu可以再去了解下~

vue能监听到数组变化的方法有哪些?为什么这些方法能监听到呢?https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8BVue  源码

学习 Vue3 的响应式原理

是不是感觉有点复杂？事实上，在上面的讲述中，我们还有问题没有解决：那就是当我们要给对象新增加一个属性时，也需要手动去监听这个新增属性。

也正是因为这个原因，使用 vue 给 data 中的数组或对象新增属性时，需要使用 vm.$set 才能保证新增的属性也是响应式的。

可以看到，通过 Object.definePorperty() 进行数据监听是比较麻烦的，需要大量的手动处理。这也是为什么在Vue3.0中尤雨溪转而采用Proxy。接下来让我们一起看一下Proxy是怎么解决这些问题的吧！

1. 基本使用

语法：const p = new Proxy( target, handler );

参数：

  1. target:要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）

  2. handler:一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

通过Proxy，我们可以对设置代理的对象上的一些操作进行拦截，外界对这个对象的各种操作，都要先通过这层拦截。（和defineProperty差不多）

一起先看一个简单的例子

  1. <script type="text/javaScript">
  2.     // 定义一个需要代理的对象
  3.     let person = {
  4.         name:'Barry',
  5.         age:22
  6.     }
  7.  
  8.     let p = new Proxy(person,{
  9.         get(target,key){
  10.             return target[key]
  11.         },
  12.         set(target,key,val){
  13.             return target[key] = val;
  14.         }
  15.     })
  16.  
  17.     console.log(p);
  18.  
  19.     //测试 get 是否可以拦截成功
  20.     console.log(p.name); // 输出 Barry
  21.     console.log(p.age);  // 输出 22
  22.     console.log(p.job);  // 输出 undefined
  23.  
  24.     //测试 set 是否可以拦截成功
  25.     p.age = 18
  26.     console.log(p.age);
  27.   </script>

 可以看出，Proxy代理的是整个对象，而不是对象的某个特定属性，不需要我们通过遍历来逐个进行数据绑定。

值得注意的是:之前我们在使用Object.defineProperty()给对象添加一个属性之后，我们对对象属性的读写操作仍然在对象本身。
但是一旦使用Proxy，如果想要读写操作生效，我们就要对Proxy的实例对象 p 进行操作。

2.解决Vue2 Object.defineProperty中遇到的问题

在上面使用Object.defineProperty的时候，我们遇到的问题有：

1.一次只能对一个属性进行监听，需要遍历来对所有属性监听。这个我们在上面已经解决了。
2. 在遇到一个对象的属性还是一个对象的情况下，需要递归监听。
3. 对于对象的新增属性，需要手动监听
4. 对于数组通过push、unshift方法增加的元素，也无法监听

这些问题在Proxy中都轻松得到了解决，让我们看看以下代码。

一起检验第二个问题

  1. <script type="text/javaScript">
  2.   // 定义一个需要代理的对象
  3.   let person = {
  4.       name:'Barry',
  5.       age:22,
  6.       job:{
  7.           city:'ShenZhen',
  8.           salary:50
  9.       }
  10.   }
  11.  
  12.   let p = new Proxy(person,{
  13.       get(target,key){
  14.           return target[key]
  15.       },
  16.       set(target,key,val){
  17.          return target[key] = val;
  18.       }
  19.   })
  20.  
  21.   console.log(p);
  22.  
  23.   //测试 get
  24.   console.log(p.job);
  25.   console.log(p.job.city);
  26.   console.log(p.job.salary);
  27.  
  28.   //测试 set
  29.   p.job.salary = 60
  30.   console.log(p.job);
  31. </script>

可以看到成功的监听到了 person 对象里的 job 对象，job 的所有属性都可以被成功监听到

一起检验第三个问题

  1. console.log(p);
  2.  
  3. //测试 get
  4. console.log(p.job);
  5. console.log(p.job.type);
  6.  
  7. //测试 set
  8. p.job.type = 'Web'
  9. console.log(p.job);

用这几行代码已经可以成功的测试出来，访问的 p.job.type 就是原对象上不存在的属性，但是我们访问它的时候，仍然可以被 get 拦截到。

一起检验第四个问题 

  1. <script type="text/javaScript">
  2.   let hobby = ['学习','看书','听歌'];
  3.  
  4.   let h = new Proxy(hobby,{
  5.       get(target,key){
  6.           return target[key]
  7.       },
  8.       set(target,key,val){
  9.           return target[key] = val
  10.       }
  11.   })
  12.  
  13.  
  14.   //检验 get 和 set
  15.   console.log(h) // 输出 Proxy {0: '学习', 1: '看书', 2: '听歌'}
  16.   console.log(h[0]) // '学习'
  17.  
  18.   h[0] = '游泳';
  19.  
  20.   console.log(h); // Proxy {0: '游泳', 1: '看书', 2: '听歌'}
  21.  
  22.   // 检验push增加的元素能否被监听
  23.  
  24.   h.push('爬山')
  25.   console.log(h); // 输出 Proxy {0: '游泳', 1: '看书', 2: '听歌', 3: '爬山'}
  26. </script>

在这，我们已经把 Vue2 遇到的问题都完美解决了！这里我们对 Proxy 的解析并不是十分全面，细心的同学在阅读 Proxy 的 MDN 文档上可能会发现其实 Proxy 中 get 陷阱中还会存在一个额外的参数 receiver 。这个感兴趣的朋友可以去查阅一番文档，这里就不详细介绍了。

3. Vue3 的双向绑定真的是这样写的吗？ 

其实并不是这样，Vue3 的响应式是通过 Proxy(代理) 配合 Reflect(反射) 进行设计的，为什么要这样设计呢？我们一起往下看

Proxy && Reflect 基础使用

  1. <script type="text/javaScript">
  2.   let person = {
  3.       name:'Barry',
  4.       age:22,
  5.       job:{
  6.           city:'ShenZhen',
  7.           salary:30
  8.       }
  9.   }
  10.  
  11.   let handler = {
  12.       get(target,key,receiver){
  13.           return Reflect.get(target,key,receiver)
  14.       },
  15.       set(target,key,val){
  16.           Reflect.set(target,key,val)
  17.       },
  18.       deleteProperty(target,key){
  19.           return Reflect.deleteProperty(target,key)
  20.       }
  21.   }
  22.  
  23.   let p = new Proxy(person,handler);
  24.  
  25.   console.log(p.name); // 输出 Barry
  26.   console.log(p.job.salary); // 输出 30
  27.  
  28.   p.job.salary = 50;
  29.   console.log(p.job.salary); // 输出 50
  30.  
  31.   delete p.job
  32.   console.log(p); // 输出Proxy {name: 'Barry', age: 22}
  33. </script>

上面只是我们一个粗糙的实现。想到这里可能有不熟悉的朋友就会问了：

什么是 Reflect ？

Reflect 其实和 Proxy 一样都是属于 ES6 的高级API，Reflect 也是属于 window 的一个内置类，可以通过 window.Reflect 访问到，看下图 

 

4. 为什么 Proxy 要配合 Reflect 一起使用

①触发代理对象的劫持时保证正确的 this 上下文指向

上边的 Demo 中一切都看起来顺风顺水没错吧，细心的同学在阅读 Proxy 的 MDN 文档上可能会发现其实 Proxy 中 get 陷阱中还会存在一个额外的参数 receiver 。 

那么这里的 receiver 究竟表示什么意思呢？大多数同学会将它理解成为代理对象

  1. <script type="text/javaScript">
  2.   const person = {
  3.       name:'Barry',
  4.       age:22
  5.   }
  6.  
  7.   const p  =new Proxy(person,{
  8.         // get陷阱中target表示原对象 key表示访问的属性名
  9.         get(target, key, receiver) {
  10.             console.log(receiver === p);
  11.             return target[key];
  12.         },
  13.  
  14.   })
  15. </script>

上述的例子中，我们在 Proxy 实例对象的 get 陷阱上接收了 receiver 这个参数。

同时，我们在陷阱内部打印 console.log(receiver === proxy); 它会打印出 true ，表示这里 receiver 的确是和代理对象相等的。

那么你可以稍微思考下这里的 receiver 究竟是什么呢？ 其实这也是 proxy 中 get 第三个 receiver 存在的意义。

它是为了传递正确的调用者指向

通过我们上述对 window.Reflect 的打印可以看到，Reflect 的方法、属性和 Proxy 是一样的，所以 Reflect get 也是有这 第三个 receiver 属性的；

  1. <script type="text/javaScript">
  2.   const person = {
  3.       name:'Barry',
  4.       age:22
  5.   }
  6.  
  7.   const p  =new Proxy(person,{
  8.         // get陷阱中target表示原对象 key表示访问的属性名
  9.         get(target, key, receiver) {
  10.             console.log(receiver === p);
  11.             return Reflect.get(target,key,receiver)
  12.         },
  13.  
  14.   })
  15.   console.log(p.name);
  16. </script>

上述代码原理其实非常简单：

我们在 Reflect 中 get 陷阱中第三个参数传递了 Proxy 中的 receiver 也就是 obj 作为形参，它会修改调用时的 this 指向。 

你可以简单的将 Reflect.get(target, key, receiver) 理解成为 target[key].call(receiver)，不过这是一段伪代码，但是这样你可能更好理解。

相信看到这里你已经明白 Relfect 中的 receiver 代表的含义是什么了，没错它正是可以修改属性访问中的 this 指向为传入的 receiver 对象。

 

 

②框架健壮性

为什么会说道框架的健壮性呢？我们一起看一段代码

  1. <script type="text/javaScript">
  2.   const person = {
  3.       name:'Barry',
  4.       age:22
  5.   }
  6.  
  7.  
  8.   Object.defineProperty(person,'height',{
  9.       get(){
  10.           return 180
  11.       }
  12.   })
  13.   Object.defineProperty(person,'height',{
  14.       get(){
  15.           return 170
  16.       }
  17.   })
  18. </script>

看一下浏览器运行环境

我们可以看到，使用 Object.defineProperty() 重复声明的属性 报错了，因为 JavaScript 是单线程语言，一旦抛出异常，后边的任何逻辑都不会执行，所以为了避免这种情况，我们在底层就要写 大量的 try catch 来避免，不够优雅。

我们来看一下 Reflect 会是什么情况？

  1. <script type="text/javaScript">
  2.    const person = {
  3.        name:'Barry',
  4.        age:22
  5.    }
  6.  
  7.  
  8.   const h1 = Reflect.defineProperty(person,'height',{
  9.        get(){
  10.            return 180
  11.        }
  12.    })
  13.    const h2 =  Reflect.defineProperty(person,'height',{
  14.        get(){
  15.            return 175
  16.        }
  17.    })
  18.    console.log(h1); // true
  19.    console.log(h2); // false
  20.    console.log(person); //age: 22,name: "Barry",height: 180
  21. </script>

 

我们可以看到使用 Reflect.defineProperty() 是有返回值的，所以通过 返回值 来判断你当前操作是否成功。

结语：

这里就到文章的结尾了，可能你很多地方还是懵懵懂懂，不妨打开电脑，一起敲一敲，试一试，可能会很有帮助；

其次文中很多地方讲解的不够细致，所以也会导致你对整体理解不是特别清晰，我争取早日完善；

最后谢谢每一位观看的小伙伴，一起加油~~~

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/140127
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号