ES6深入浅出-13 Proxy 与 Reflect-3.Vue 3 将用 Proxy 改写

如果说想打印出来年龄,但是有没有年龄的这个key值

把创建年龄写在一个按钮上面
通过一个事件来做。



点击创建年龄的按钮,给obj.age设置为18,但是页面的双向绑定并没有显示出来。

因为不响应式,为什么vue不能发现了我改了age呢???因为vue是通过另外一个api。Object.defineProperty来做响应式 的

vue发现你有个name属性,于是就给这个name创建Property,会根据你get和set的时候去更新页面上的值。因为默认没有age属性,所以就不会去age进行get和set的拦截。

Object.defineProperty这个api的缺点是必须给它一个key。就是没有办法拦截不存在的key
只要以开始有这个key就可以了。哪怕值是undefined。只要有这个key是age就可以了

如果用proxy,就不必,必须要定义这个age的值了。

模拟改变值时的变化


建议买的课程是js深入浅出,并不是这套ES6的课程

结束
ES6深入浅出-13 Proxy 与 Reflect-3.Vue 3 将用 Proxy 改写的更多相关文章
- ES6深入浅出-13 Proxy 与 Reflect-1.Reflect 反射
阮一峰 http://es6.ruanyifeng.com/#docs/reflect MDN有一些简陋的介绍 https://developer.mozilla.org/zh-CN/docs/We ...
- ES6深入浅出-13 Proxy 与 Reflect-2.Proxy 代理
阮一峰http://es6.ruanyifeng.com/#docs/proxy MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ...
- ES6深入浅出_汇总贴
H:\BaiDu\ES6深入浅出-wjw ES 6 新特性一览:https://frankfang.github.io/es-6-tutorials/ 我用了两个月的时间才理解 let https:/ ...
- es6学习笔记-Proxy、Reflect、Promise
Proxy Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. Proxy 可以理解成,在目标对象之前 ...
- ES6学习笔记四:Proxy与Reflect
一:Proxy 代理. ES6把代理模式做成了一个类,直接传入被代理对象.代理函数,即可创建一个代理对象,然后我们使用代理对象进行方法调用,即可调用被包装过的方法: 1)创建 var proxy = ...
- es6之Proxy,Reflect
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写. var proxy = new Proxy(ta ...
- ES6入门:数据劫持、Proxy、Reflect
什么是数据劫持 Object数据劫持实现原理 Array数据劫持的实现原理 Proxy.Reflect 一.什么是数据劫持 定义:访问或者修改对象的某个属性时,在访问和修改属性值时,除了执行基本的数据 ...
- ES6 Proxy和Reflect(下)
construct() construct方法用于拦截new命令. var handler = { construct (target, args) { return new target(...ar ...
- ES6 Proxy和Reflect (上)
Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Proxy可以理 ...
随机推荐
- Office2016专业增强版永久激活
Office2016专业增强版永久激活码:Microsoft Office 2016 Pro Plus Retail Mak序列号XNTT9-CWMM3-RM2YM-D7KB2-JB6DVBHXN7- ...
- mysql占用内存过高调优方法
最近测试一个站点,用mysql 5.6+mencache 内存16GB,但是进行查询的时候还是导致CPU占用过高,达到80%左右,所以想办法如何进行调优.以下几个参数进行参考选择 优化mysql数据 ...
- 神经网络(13)--具体实现:random initialization
Θ应初始化为什么值 当我们是用logistic regression算法时,将θ初始化为0是可以的:但是如果在神经网络里面,将θ初始化为0是不可行的 若将Θ初始化为0的后果-the problem o ...
- APP弱网测试工具(QNET)
QNET介绍官网链接:https://wetest.qq.com/product/qnet 目前在测试移动设备上进行弱网络专项测试的方案主要有两种: 通过Android设备连接到PC上进行弱网络测试, ...
- restful接口规范 | 基于restful的原生django接口
restful接口规范 接口 接口:联系两个物质的媒介,完成信息交互 web程序中:联系前台页面与后台数据库的媒介 web接口组成: - url:长得像返回数据的url链接 - 请求参数:前台按照指定 ...
- 【学习笔记】Baby Step Giant Step算法及其扩展
1. 引入 Baby Step Giant Step算法(简称BSGS),用于求解形如\(a^x\equiv b\pmod p\)(\(a,b,p\in \mathbb{N}\))的同余方程,即著名的 ...
- if __name__ == "__main__",python主程序入口
https://blog.csdn.net/liukai2918/article/details/79465671
- Codeforces 876E National Property ——(2-SAT)
在这题上不是标准的“a或b”这样的语句,因此需要进行一些转化来进行建边.同时在这题上点数较多,用lrj大白书上的做法会T,因此采用求强连通分量的方法来求解(对一个点,如果其拓扑序大于其为真的那个点,则 ...
- 为什么要监控sql语句,以及如何监控,都有哪几种方式可以监控。
快速阅读 为什么要监控sql语句,以及如何监控,都有哪几种方式可以监控. 我们知道sql server 中有个工具叫sql profile ,可以实时监控sql server中 执行的sql 语句,以 ...
- WINDOWS和LINUX相互传文件WINSCP
WINDOWS和LINUX相互传文件WINSCP 下载并安装WINSCP程序. 左边是WINDOWS文件目录,右边是LINUX目录,选中文件,鼠标拖曳就可以传文件,非常方便.