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

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

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

注意事项

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

关于简单的数据双向绑定原理，defineProperty 和Proxy演示的更多相关文章

  1. 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  2. vue数据双向绑定原理

    vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...

  3. 对象的属性类型 和 VUE的数据双向绑定原理

    如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty()  //IE9+  和标准浏览器  支持 查看属性的 ...

  4. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  5. Vue数据双向绑定原理（vue2向vue3的过渡）

    众所周知,Vue的两大重要概念: 数据驱动 组件系统 1 2 接下来我们浅析数据双向绑定的原理 一.vue2 1.认识defineProperty vue2中的双向绑定是基于definePropert ...

  6. vuejs数据双向绑定原理（get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...

  7. 前端数据双向绑定原理:Object.defineProperty()

    Object.definedProperty方法可以在一个对象上直接定义一个新的属性.或修改一个对象已经存在的属性,最终返回这个对象. Object.defineProperty(obj, prop, ...

  8. [JS] 数据双向绑定原理

    通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title" ...

  9. Vue的数据双向绑定原理——Object-defineProperty

    一.定义 ①方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ②vue.js的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截 ...

随机推荐

  1. activiti学习笔记一

    activiti学习笔记 在讲activiti之前我们必须先了解一下什么是工作流,什么是工作流引擎. 在我们的日常工作中,我们会碰到很多流程化的东西,什么是流程化呢,其实通俗来讲就是有一系列固定的步骤 ...

  2. 入门大数据---Kylin搭建与应用

    由于Kylin官网已经是中文的了,而且写的很详细,这里就不再重述. 学习右转即可. 这里说个遇到的问题,当在Kylin使用SQL关键字时,要加上双引号,并且里面的内容要大写,这个和MySql有点区别需 ...

  3. keras训练函数fit和fit_generator对比，图像生成器ImageDataGenerator数据增强

    1. [深度学习] Keras 如何使用fit和fit_generator https://blog.csdn.net/zwqjoy/article/details/88356094 ps:解决样本数 ...

  4. mycat增加开机自启

    一.安装及配置: 见https://github.com/MyCATApache/Mycat-Server 二.增加开机自启: 1.添加开机自启脚本:vim /etc/init.d/mycat.sh, ...

  5. 一.8.django权限管理/drf权限管理

    1.什么是权限管理: .权限管理,一般指根据系统设置的安全规则或者安全策略,用户可以访问而且只能访问自己被授权的资源 .权限管理好比如钥匙,有了钥匙就能把门打开,但是权限设置是有级别之分的,假如这个系 ...

  6. 二.httpRequest-httpResponse-JsonResponse对象

     一.HttpRequest对象 HttpRequest在django.http这个模块中 它是用django创建 文档https://docs.djangoproject.com/en/1.11/r ...

  7. Spring Boot 整合 Shiro-登录认证和权限管理

    这篇文章我们来学习如何使用 Spring Boot 集成 Apache Shiro .安全应该是互联网公司的一道生命线,几乎任何的公司都会涉及到这方面的需求.在 Java 领域一般有 Spring S ...

  8. 一个很酷炫也挺实用的JS库leader-line

    简单粗暴,直入主题,看看效果再说. 是不是这效果挺棒?这样的效果在做系统时,可以有很多的应用,可以让枯燥的页面生动起来. 具体效果,大家可以上这个搜索网站Mag[i]上面看,切身体会一下. 这是一个开 ...

  9. linux系统，没有安装任何编辑器的情况，如何操作文件

    [清空文件] echo  " " > filename [添加内容] echo "123" >> filename

  10. 【学习随手记】kubeadm 查看创建集群需要的镜像版本，附拉取镜像脚本

    查看创建集群需要的镜像版本 kubeadm config images list [--kubernetes-version <version>] 国内拉取镜像脚本 一般而言,直接使用ku ...