双向绑定，也就是说js中的数据传到页面，页面中的内容到js，实现同步更新，简单的演示可以直接复制下放HTML代码运行。

在这个例子中，我们使用defineProperty ，Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。详细信息可以自行查看MDN文档。

简单来说，defineProperty 就是一个监听器，监听对象中某一个属性被访问和修改，在Vue2.0中就是采用defineProperty

注意事项

  1. 在使用get函数监听属性的时候，不能直接监听当前属性，否则会出现死循环。所以在使用前我将对象进行浅拷贝的原因
  2. 每一个defineProperty只能对一个对象属性进行监听，所以你必须在使用之前就得知道属性的名字，但是很多时候属性是动态生成的，，所以就很麻烦。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <h1 id="hname"></h1>

    <input type="text" id="inputname">

</body>

<script>

    let stu = {

        name: ""

    }

    let newstu = { ...stu };//浅拷贝

    //监听器

    Object.defineProperty(stu, "name", {

        get() {

            return newstu.name;

        },

        set(val) {

            if (val === newstu.name) return;

            newstu.name = val;

            doubleBind();

        }

    })

    //将数据传到页面中

    function doubleBind() {

        document.querySelector("#hname").innerHTML = stu.name;

        inputname.value = stu.name;//id可以直接使用

    }

    //输入框事件，将页面中数据返回

    inputname.oninput = function () {

        stu.name = inputname.value;

    }

    doubleBind()

    setTimeout(() => {

        stu.name = "Mary";

    }, 1000)

</script>

</html>

defineProperty的弊端很明显，在ES6中提出了Proxy， 在Vue3.0中也将使用Proxy代替defineProperty，在Proxy中，我们可以在监听整一个对象属性的变化。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <h1 id="hname"></h1>

    <input type="text" id="inputname">

</body>

<script>

    let stu = {

        name: "12354"

    }

    //监听器处理函数

    //监听器

    stu = new Proxy(stu, {

        get(target, prop) {

            return target[prop];

        },

        set(target, prop,val){

            if (val === target.prop) return;

            target[prop] = val;

            doubleBind();

        }

    });

    //将数据传到页面中

    function doubleBind() {

        document.querySelector("#hname").innerHTML = stu['name'];

        inputname.value = stu['name'];//id可以直接使用

    }

    //输入框事件，将页面中数据返回

    inputname.oninput = function () {

        stu['name'] = inputname.value;

    }

    doubleBind()

    setTimeout(() => {

        stu['name'] = "Mary";

        console.log(stu);

    }, 1000)

</script>

</html>

对比两个例子，眼尖的friend会发现，第一个例子中我访问对象属性使用的是stu.name,而在第二个例子中使用的是stu['name']的方式。在《javascript高级程序设计》

引用类型的那一章提到：一般来说，访问对象属性时使用的都是点表示法，这也是很多面向对象语言中通用的语法。不过，

在 JavaScript 也可以使用方括号表示法来访问对象的属性。除非必须使用变量来访问属性，否则我们建议使用点表示法。在我们第二个例子Proxy中，prop是一个变量，所以我们使用方括号。特别要注意，stu.name和stu[name]是不一样的，当然如果有外部变量name=“name“，就一样了

最后

想要学习java基础或者进阶java 的同学私信回复 资料

领取一线大厂Java面试题总结+阿里巴巴泰山手册+各知识点学习思维导+一份300页pdf文档的Java核心知识点总结！

这些资料的内容都是面试时面试官必问的知识点，篇章包括了很多知识点，其中包括了有基础知识、Java集合、JVM、多线程并发、spring原理、微服务、Netty 与RPC 、Kafka、日记、设计模式、Java算法、数据库、Zookeeper、分布式缓存、数据结构等等。

defineProperty 和Proxy双向绑定演示，你还不知道么？的更多相关文章

  1. 实现双向绑定Proxy比defineproperty优劣如何?

    前言 双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素之一. Vue三要素 响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向绑定 ...

  2. vue双向绑定、Proxy、defineproperty

    本文原链接:https://www.jianshu.com/p/2df6dcddb0d7 前言 双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素 ...

  3. 【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示

    前言: Wpf开发过程中,最经常使用的功能之一,就是用户控件(UserControl)了.用户控件可以用于开发用户自己的控件进行使用,甚至可以用于打造一套属于自己的UI框架.依赖属性(Dependen ...

  4. 最近老是有兄弟问我，Vue双向绑定的原理，以及简单的原生js写出来实现，我就来一个最简单的双向绑定，原生十行代码让你看懂原理

    废话不多说直接看效果图 代码很好理解,但是在看代码之前需要知道Vue双向绑定的原理其实就是基于Object.defineProperty 实现的双向绑定 官方传送门 这里我们用官方的话来说Object ...

  5. 关于简单的数据双向绑定原理，defineProperty 和Proxy演示

    双向绑定,也就是说js中的数据传到页面,页面中的内容到js,实现同步更新,简单的演示可以直接复制下放HTML代码运行. 在这个例子中,我们使用defineProperty ,Object.define ...

  6. vue Object.defineProperty Proxy 数据双向绑定

    Object.defineProperty 虽然已经能够实现双向绑定了,但是他还是有缺陷的. 只能对属性进行数据劫持,所以需要深度遍历整个对象 对于数组不能监听到数据的变化 虽然 Vue 中确实能检测 ...

  7. 双向绑定Proxy VS Object.defineProperty

    Vue3.0的双向绑定将使用Proxy代替Object.defineProperty,据尤大说,速度提升了1倍. 本文我们来探讨一下Proxy对比Object.defineProperty究竟有哪些优 ...

  8. 深入理解Proxy 及 使用Proxy实现vue数据双向绑定

    阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...

  9. 深入理解 Object.defineProperty 及实现数据双向绑定

    Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...

随机推荐

  1. Linux命令查勘进程：ps -ef |grep java

    一.ps -ef |grep java 查看包含“java”的所有进程 二.涉及命令详解 ps命令将某个进程显示出来(是LINUX下最常用的也是非常强大的进程查看命令) grep命令是查找(是一种强大 ...

  2. Jquery中$(document).ready()

    window.onload = function(){ alert("welcome"); } 语句的作用是希望在页面加载完,自动执行定义js代码(function). $(doc ...

  3. 看完这篇Redis缓存三大问题，保你面试能造火箭，工作能拧螺丝。

    前言 日常的开发中,无不都是使用数据库来进行数据的存储,由于一般的系统任务中通常不会存在高并发的情况,所以这样看起来并没有什么问题. 一旦涉及大数据量的需求,如一些商品抢购的情景,或者主页访问量瞬间较 ...

  4. Windows7 PowerShell 2.0升级到 PowerShell 5.1

    Windows7 sp1内置的PowerShell的版本是v2.0,现需要将其升级到v5.1,过程中有一个环节需要引起注意,为了以后查阅的方便,现将其记录下来. 1 查看PowerShell版本 Wi ...

  5. Jmeter系列（33）- 跨平台运行 Jmeter，CSV 文件路径如何设置？

    如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html 抛出问题 上一篇文章中详细讲解了 CS ...

  6. jvm之栈、堆

    1. Java Virtual Machine ​ 人群当中,一位叫java的小伙子正向周围一众人群细数着自己取得的荣耀与辉煌.就在此时,c老头和c++老头缓步走来,看着被众人围住的java,c老头感 ...

  7. CSS基础面试题，快来查漏补缺

    本文大部分问题来源:50道CSS基础面试题(附答案),外加一些面经. 我对问题进行了分类整理,并给了自己的回答.大部分知识点都有专题链接(来源于本博客相关文章),用于自己前端CSS部分的查漏补缺.虽作 ...

  8. 萌新计划 PartⅡ

    Part Ⅱ web 9-15 这一部分的题,主要是绕过过滤条件,进行命令执行 0x01 web 9 过滤条件: if(preg_match("/system|exec|highlight/ ...

  9. web notification api

    Web Notifications API 使页面可以发出通知,通知将被显示在页面之外的系统层面上(通常使用操作系统的标准通知机制,但是在不同的平台和浏览器上的表现会有差异) 要显示一条通知,你需要先 ...

  10. python 装饰器（四）：装饰器基础（三）叠放装饰器，参数化装饰器

    叠放装饰器 示例 7-19 演示了叠放装饰器的方式:@lru_cache 应用到 @clock 装饰fibonacci 得到的结果上.在示例 7-21 中,模块中最后一个函数应用了两个 @htmliz ...