如果说想打印出来年龄,但是有没有年龄的这个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. 在输出debug日志前加上logger.isDebugEnabled()判断的原因

    场景: String token = md5.substring(0, 10) + base64Two + md5.substring(10); if (logger.isDebugEnabled() ...

  2. 火狐谷歌webdriver驱动地址

    ChormeDrive下载 打开百度搜索Chromedriver官网下载,点击进入这个页面,链接为:http://npm.taobao.org/mirrors/chromedriver/2.41/  ...

  3. C++编程习惯

    1.初始化列表,尽量使用. 2.函数是否加const,只用而不改变就推荐加上const.如自定义的get某个属性的函数. 3.函数参数尽量用引用传递,返回值也优先考虑引用类型(引用必须保证在使用前,本 ...

  4. mysql数据库从一台服务器迁移到另一台服务器上

    一.应用场景      由于要把测试服务器上的数据库迁移到正式服务器上,因此需要做数据库的迁移.这里记录一下. 二.数据库迁移1.新建数据库test create database test;12.进 ...

  5. 汇编语言笔记 CALL和RET指令

    转载地址:http://www.cnblogs.com/dennisOne ☞模块化程序设计 模块化程序设计 汇编语言通过call和ret指令实现了模块化程序设计.可以实现多个相互联系.功能独立的子程 ...

  6. include和taglib指令

    1.include指令用来包含另一个静态文件,这个静态文件可以是一个JSP页面.一个Servlet.文本文件.JSP代码. include.jsp <%@ page contentType=&q ...

  7. tar归档压缩命令和zip归档 和7zip压缩命令;库文件归档ar命令

    第一.tar 归档 tar -c 创建归档文件包 tar -x 释放归档文件包 tar -t 查看归档文件包 tar -v 显示归档包操作过程信息 tar -f 指定归档文件名 案例1:归档 /hom ...

  8. 线程池(6)-submit与execute区别

    在线程池里提交任务经常见到submit与execute,如何选择,傻傻分不清楚.那么他们俩有什么区别,使用场景是什么?这篇博客将会介绍. 1.方法定义 void execute(Runnable co ...

  9. 从过狗到编写tamper【转载】

    原作者:我会啊D 原文出处:https://www.t00ls.net/articles-52894.html 0x0 前言 在sql注入的时候,很可能会碰到各种厂商的waf,bypass之后,以后每 ...

  10. centos7--zabbix3.4微信报警

    1.申请企业微信 1.1 注册企业微信的地址 https://qy.weixin.qq.com/ 1.2 按照提示进行填写 1.3 完善个人信息: 1.4 创建应用 根据提示创建应用: 1.5 筛出重 ...