如果说想打印出来年龄,但是有没有年龄的这个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 改写的更多相关文章

  1. ES6深入浅出-13 Proxy 与 Reflect-1.Reflect 反射

    阮一峰  http://es6.ruanyifeng.com/#docs/reflect MDN有一些简陋的介绍 https://developer.mozilla.org/zh-CN/docs/We ...

  2. ES6深入浅出-13 Proxy 与 Reflect-2.Proxy 代理

    阮一峰http://es6.ruanyifeng.com/#docs/proxy MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ...

  3. ES6深入浅出_汇总贴

    H:\BaiDu\ES6深入浅出-wjw ES 6 新特性一览:https://frankfang.github.io/es-6-tutorials/ 我用了两个月的时间才理解 let https:/ ...

  4. es6学习笔记-Proxy、Reflect、Promise

    Proxy Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. Proxy 可以理解成,在目标对象之前 ...

  5. ES6学习笔记四:Proxy与Reflect

    一:Proxy 代理. ES6把代理模式做成了一个类,直接传入被代理对象.代理函数,即可创建一个代理对象,然后我们使用代理对象进行方法调用,即可调用被包装过的方法: 1)创建 var proxy = ...

  6. es6之Proxy,Reflect

    Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写. var proxy = new Proxy(ta ...

  7. ES6入门:数据劫持、Proxy、Reflect

    什么是数据劫持 Object数据劫持实现原理 Array数据劫持的实现原理 Proxy.Reflect 一.什么是数据劫持 定义:访问或者修改对象的某个属性时,在访问和修改属性值时,除了执行基本的数据 ...

  8. ES6 Proxy和Reflect(下)

    construct() construct方法用于拦截new命令. var handler = { construct (target, args) { return new target(...ar ...

  9. ES6 Proxy和Reflect (上)

    Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Proxy可以理 ...

随机推荐

  1. 《CoderXiaoban》第九次团队作业:Beta冲刺与验收准备2

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 实验十三 团队作业9:BETA冲刺与团队项目验收 团队名称 Coderxiaoban团队 作业学习目标 (1)掌握软件黑盒 ...

  2. K-means: optimization objective(最小化cost function来求相应的参数)

    类似于linear regression,K-means算法也optimization objective或者是试图使cost function求最小值. 了解K-means算法的optimizati ...

  3. 序列:SEQUENCE

    一.序列介绍 Oracle的序列是一种数据库对象,主要作用是用来产生唯一值.序列被创建以后可以通过数据字典找到序列对象,因此序列可以被多个对象共享. 二.创建序列 序列使用CREATE SEQUENC ...

  4. CF827D Best Edge Weight 题解

    题意: 给定一个点数为 n,边数为 m,权值不超过 \(10^9\) 的带权连通图,没有自环与重边. 现在要求对于每一条边求出,这条边的边权最大为多少时,它还能出现在所有可能的最小生成树上,如果对于任 ...

  5. Linux 使用shell脚本实现自动SSH互信功能

    说假设有一个1000台节点的Hadoop集群,要配置节点之间的SSH免密码登录,该如何用shell脚本实现?#!/bin/expect #循环1000台机器的IP地址,生成密钥文件authorized ...

  6. windows下命令行切换目录

    1.切换目录 C:\Users\MACHENIKE> cd H:/www C:\Users\MACHENIKE>H: H:\www> 2.查看目录文件 H:\www>dir

  7. “猜你喜欢”的背后揭秘--10分钟教你用Python打造推荐系统

    欲直接下载代码文件,关注我们的公众号哦!查看历史消息即可! 话说,最近的瓜实在有点多,从我科校友李雨桐怒锤某男.陈羽凡吸毒被捕.蒋劲夫家暴的三连瓜,到不知知网翟博士,再到邓紫棋解约蜂鸟.王思聪花千芳隔 ...

  8. 1071 Speech Patterns (25)(25 分)

    People often have a preference among synonyms of the same word. For example, some may prefer "t ...

  9. threejs行星运动小demo总结

    1.动画构思 就是中间有个红太阳,外面有几个行星球体环绕着太阳在各自轨道上做圆周运动.下面是效果图 2.基本要素 使用threejs的基本构件包括:渲染器(renderer),相机(camera),场 ...

  10. YouTube排名第一的励志英文演讲《Dream(梦想)》

    I don’t know what that dream is that you have, I don't care how disappointing it might have been as ...