好家伙,这个有点难.

1.代理对象Proxy

Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。

拦截对象中任意属性的变化,包括:查get,增和改set,删除delete

1.1.语法:

const p = new Proxy(target, handler)

1.1.1参数:

target

要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。

handler

一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理 p 的行为。(这个可以塞get和set)

上代码:vue3响应式的模板

const p = new Proxy(person,{
//有人读取p的某个属性时调用
get(target,propName){
console.log(`有人读取了p身上的${propName}属性`)
return Reflect.get(target,propName)
},
//有人修改p的某个属性、或给p追加某个属性时调用
set(target,propName,value){
console.log(`有人修改了p身上的${propName}属性,我要去更新界面了!`)
Reflect.set(target,propName,value)
},
//有人删除p的某个属性时调用
deleteProperty(target,propName){
console.log(`有人删除了p身上的${propName}属性,我要去更新界面了!`)
return Reflect.deleteProperty(target,propName)
},

1.2.   deleteProperty

1.2.1. 

handler.deleteProperty() 方法可以拦截 delete 操作。(可以在网页控制台)

1.2.2.其参数

deleteProperty 方法将会接受以下参数。

target
目标对象。
property
待删除的属性名。

1.2.3.返回值

deleteProperty 必须返回一个 Boolean 类型的值,表示了该属性是否被成功删除。

 

2.  反射对象Reflect:对被代理对象的属性进行操作,

      对被代理对象的属性进行操作!

      对被代理对象的属性进行操作!

2.1. Reflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法。

它把事做完后,会返回一个布克值,所以可以直接在前面接return

第三十六篇:vue3响应式(关于Proxy代理对象,Reflect反射对象)的更多相关文章

  1. 第三十九篇:Vue3 watch(ref和reactive的监视)

    好家伙, 1.vue2中的watch是调用配置项,(只能写一个) vue3中的watch是一个函数(可以写很多个) 2.watch一些用法: 这里是定义的数据 set up(){ let sum =r ...

  2. 第三十五篇:vue3,(组合式api的初步理解)

    好家伙, 来一波核心概念:数据劫持是响应式的核心 1.由set up开始 (1)vue3中的一个新的配置项,值为一个函数. (2)组件中所用的到的:数据,方法,计算属性均要配置在set up中. (3 ...

  3. Python之路(第三十六篇)并发编程:进程、同步异步、阻塞非阻塞

    一.理论基础 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一.操作系统的其他所有内容都是围绕进程的概念展开的. 即使可以利用的cpu只有一个(早期的 ...

  4. Android UI开发第三十六篇——使用Volley加载图片列表

    Android开发者可能会使用Universal Image Loader或者Square`s newer Picasso这些第三方的库去处理图片的加载,那么Volley是怎么加载图片列表的呢,这一篇 ...

  5. C++第三十六篇 -- 为第一个驱动程序进行调试

    工具是VMware12+Win10+VS2017+WDK1809 https://blog.csdn.net/qq_21763381/article/details/83242916 首先分清楚主计算 ...

  6. 第三十八篇:vue3路由

    好家伙,水博客怎么说 1.0.安装:简简单单的淘宝镜像安装 装一下淘宝镜像(一般都有) npm install -g cnpm --registry=https://registry.npm.taob ...

  7. 第三十六篇、webService

    在很多的情况下,我们会常常遇到webservive写的接口,往往这种情况下,我们就需要拼接一段报文去与服务器对接 首先要明白webService的工作原理,,,(http://www.cnblogs. ...

  8. 第三十六篇-FloatingActionButton的使用

    效果图: 准备两张图片,一张作为桌面背景,一张作为那个悬浮的加号.放在mipmap下面. 首先,添加Imageview作为桌面背景,并设置扩充整个屏幕.接着,添加一个悬浮按钮,放在右下角,可以对悬浮按 ...

  9. 第三十六篇 入门机器学习——Jupyter Notebook中的魔法命令

        No.1.魔法命令的基本形式是:%命令   No.2.运行脚本文件的命令:%run %run 脚本文件的地址 %run C:\Users\Jie\Desktop\hello.py # 脚本一旦 ...

随机推荐

  1. 【RocketMQ】MQ消息发送

    消息发送 首先来看一个RcoketMQ发送消息的例子: @Service public class MQService { @Autowired DefaultMQProducer defaultMQ ...

  2. 4种方法教你如何查看java对象所占内存大小

    摘要:本文讲述4种查看java对象所占内存大小的方法 本文分享自华为云社区<查看java对象所占内存大小>,作者:xiewenci. 计算java对象所占内存大小 1.使用jdk8自带AP ...

  3. weiphp 插件"通用表单"BUG修改

    修改文件目录 在类FormsValueController 中添加函数 // 匹配函数 //$value:字符串 //$validate_rule:正则规则 // return true:比配成功,f ...

  4. windows下telnet的用法

    前言 这里利用Windows7下如何使用Telnet命令给大家总结如下: 第一步:在控制面板里,点击"程序"选项 第二步:在程序选项下,点击"打开或关闭Windows功能 ...

  5. application.yml 常用基本配置

    前言 在平时的项目开发中,自己对application.yml的配置的写法较为熟悉,现在自己就application.yml常用的配置进行总结如下: 1.Tomcat 配置 server: #设置请求 ...

  6. HTML:<input type="text"> 输入数字时的验证!(在提交时验证)

    <!--非负数:<input type="text" name="" pattern="^\d+$">--> < ...

  7. .NET GC工作流程

    前言 在上文[如何获取GC的STW时间]一文中,我们聊到了如何通过监听GC发出的诊断事件来计算STW时间.里面只简单的介绍了几种GC事件和它的流程. 群里就有小伙伴在问,那么GC事件是什么时候产生的? ...

  8. 4-6 Mabatis 框架

    Mabatis 框架 Ⅰ.关于Mabatis 对数据库中的数据进行访问的框架 数据库执行过程: 连接数据库-->准备好SQL-->发送SQL语句-->执行语句-->获取结果-- ...

  9. Spring Data JPA 在 @Query 中使用投影的方法

    Spring Data JPA 在 @Query 中使用投影的方法 关于投影的基本使用可以参考这篇文章:https://www.baeldung.com/spring-data-jpa-project ...

  10. Dubbo源码(三) - 服务导出(生产者)

    前言 本文基于Dubbo2.6.x版本,中文注释版源码已上传github:xiaoguyu/dubbo 在了解了Dubbo SPI后,我们来了解下Dubbo服务导出的过程. Dubbo的配置是通过Du ...