从 Vue3 源码学习 Proxy & Reflect

开发 前端
如果你使用的是Vue框架,尝试修改组件的 props 对象,它将触发Vue的警告日志,这个功能是使用 Proxy :) !

[[436812]]

这两个功能都出现在ES6中,两者配合得非常好!

Proxy

**proxy **是一个外来的对象,他没有属性! 它封装了一个对象的行为。它需要两个参数。

const toto = new Proxy(target, handler) 
  • 1.

**target: **是指将被代理/包裹的对象 **handler: **是代理的配置,它将拦截对目标的操作(获取、设置等)

多亏了 proxy ,我们可以创建这样的 traps :

const toto = { a: 55, b:66 } 
const handler = { 
 get(target, prop, receiver) { 
   if (!!target[prop]) { 
     return target[prop] 
    } 
    return `This ${prop} prop don't exist on this object !` 
  } 

 
const totoProxy = new Proxy (toto, handler) 
 
totoProxy.a // 55 
totoProxy.c // This c prop don't exist on this object ! 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

 每个内部对象的 "方法" 都有他自己的目标函数

下面是一个对象方法的列表,相当于进入了 Target:

object methodtargetobject[prop]getobject[prop] = 55setnew Object()constructObject.keysownKeys 
  • 1.

目标函数的参数可以根据不同的函数而改变。

例如,对于get函数取(target, prop, receiver(proxy本身)),而对于 set 函数取(target, prop, value (to set), receiver)

例子

我们可以创建私有属性。

const toto = { 
   name'toto'
   age: 25, 
   _secret: '***' 

 
const handler = { 
  get(target, prop) { 
   if (prop.startsWith('_')) { 
       throw new Error('Access denied'
    } 
    return target[prop] 
  }, 
  set(target, prop, value) { 
   if (prop.startsWith('_')) { 
       throw new Error('Access denied'
    } 
    target[prop] = value 
    // set方法返回布尔值 
    // 以便让我们知道该值是否已被正确设置 ! 
    return true 
  }, 
  ownKeys(target, prop) { 
     return Object.keys(target).filter(key => !key.startsWith('_')) 
  }, 

 
const totoProxy = new Proxy (toto, handler) 
for (const key of Object.keys(proxy1)) { 
  console.log(key) // 'name''age' 

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.

Reflect

Reflect 是一个静态类,简化了 proxy 的创建。

每个内部对象方法都有他自己的 Reflect 方法

object methodReflectobject[prop]Reflect.getobject[prop] = 55Reflect.setobject[prop]Reflect.getObject.keysReflect.ownKeys 
  • 1.

❓ 为什么要使用它?因为它和Proxy一起工作非常好! 它接受与 proxy 的相同的参数!

const toto = { a: 55, b:66 } 
 
const handler = { 
  get(target, prop, receiver) { 
   // 等价 target[prop] 
   const value = Reflect.get(target, prop, receiver) 
   if (!!value) { 
      return value  
   } 
   return `This ${prop} prop don't exist on this object !`  
  }, 
  set(target, prop, value, receiver) { 
     // 等价  target[prop] = value 
     // Reflect.set 返回 boolean 
     return Reflect.set(target, prop, receiver) 
  }, 

 
const totoProxy = new Proxy (toto, handler) 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

 所以你可以看到 Proxy 和 Reflect api是很有用的,但我们不会每天都使用它,为了制作陷阱或隐藏某些对象的属性,使用它可能会很好。

如果你使用的是Vue框架,尝试修改组件的 props 对象,它将触发Vue的警告日志,这个功能是使用 Proxy :) !

作者:CodeOz 译者:前端小智

来源:dev 原文:https://dev.to/codeoz/proxy-reflect-api-in-javascript-51la

 

责任编辑:姜华 来源: 今日头条
相关推荐

2021-12-01 08:11:44

Vue3 插件Vue应用

2021-11-30 08:19:43

Vue3 插件Vue应用

2023-11-28 09:03:59

Vue.jsJavaScript

2021-09-22 07:57:23

Vue3 插件Vue应用

2022-04-14 09:35:03

Vue.js设计Reflect

2021-11-16 08:50:29

Vue3 插件Vue应用

2021-12-02 05:50:35

Vue3 插件Vue应用

2025-02-25 08:51:19

2020-09-17 07:08:04

TypescriptVue3前端

2022-01-26 11:00:58

源码层面Vue3

2021-12-08 09:09:33

Vue 3 Computed Vue2

2021-12-29 07:51:21

Vue3 插件Vue应用

2021-09-27 06:29:47

Vue3 响应式原理Vue应用

2020-09-19 21:15:26

Composition

2021-07-29 12:05:18

Vue3Api前端

2023-12-11 07:34:37

Computed计算属性Vue3

2024-07-01 13:45:18

2021-03-22 10:05:25

开源技术 项目

2023-12-14 08:25:14

WatchVue.js监听数据

2021-11-17 08:24:47

Vue3 插件Vue应用
点赞
收藏

51CTO技术栈公众号