如果说想打印出来年龄,但是有没有年龄的这个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. Python语言程序设计(1)--实例1和基本知识点

    记录慕课大学课程<Python语言程序设计>的学习历程. 实例1:温度转换 #温度转换TempStr = input("请输入带有符号的温度值:") #TempStr是 ...

  2. 1.什么是spring

    spring框架是一个为java应用程序的开发提供了综合,广泛的基础性支持的java开源框架, 使得开发者不用去关心一些冗杂的基础性问题,从而可以更加专注于应用程序的开发. spring框架是一个分层 ...

  3. HDFS集群中DataNode的上线与下线

    在HDFS集群的运维过程中,肯定会遇到DataNode的新增和删除,即上线与下线.这篇文章就详细讲解下DataNode的上线和下线的过程. 背景 在我们的微职位视频课程中,我们已经安装了3个节点的HD ...

  4. Oracle 新增数据 insert into整理

    一.普遍的方法:insert into 表名(id,name,age,status,字段N) values('id','name','age','status','字段N');   --建议用这个   ...

  5. HiveQL 查询

    一.select ...... from 语句 1.使用正则表达式来指定列 1)从表stocks中选择symbol列和列名以price作为前缀的列 select symbol,`price.*`  f ...

  6. 1.7volatile关键字

    volatile volatile关键字的主要作用是使变量在多个线程间可见 使用方法: private volatile int number=0; 图示: 两个线程t1和t2共享一份数据,int a ...

  7. HTML5新增常用标签

    1.header 标签定义文档的页眉(介绍信息). <body> <article> <header> <h1>What Does WWF Do?< ...

  8. ES特点

    ES                     Hadoop                       spark的区别存(可扩展)         hdfs存(可扩展)             不存 ...

  9. leetcode 712

    这道题的思路:我是根据最长公共子序列的思路得来的. 最长公共子序列是: d[i][j]表示字符串s1前i个(0-i-1)字符,和字符串s2前j个(0-j-1)字符的最长公共子序列. 分情况讨论: 当s ...

  10. Unity 3d 实现物体跟随摄像机视野运动

    https://blog.csdn.net/qq_31411825/article/details/61623857 Unity 3d 实现物体跟随摄像机视野运动Created by miccall ...