概述

今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(angular.js),有用发布者-订阅者模式的(JQuery),也有用Object.defineProperty的(vue),其中用Object.defineProperty的(vue)特别简单,今天顺便记录下供以后开发时参考,相信对其他人也有用.

我参考了这篇文章:Vue.js双向绑定的实现原理.

类似双向绑定的效果

其实用事件代理就可以实现类似双向绑定的效果,原理是当检测到数据改动时会触发一个keyup事件或者表单的change事件,通过监听这个事件做出响应,对应改变dom的内容.

代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

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

<span id="b"></span>

<script>

  var b = document.getElementById('b');

  document.addEventListener('keyup', function (e) {

    b.innerText = e.target.value;

  });

</script>

</body>

</html>

通过在输入框里面输入内容,内容会在右边同步显示或改变.

需要注意的是,react其实是一种单向数据流,那么怎么用react实现双向绑定呢?就是用的这个原理!

可以点击下面的按钮体会一下(在输入框里面输入内容,右边会即时更新):

Document

<script>

var b = document.getElementById('b');

document.addEventListener('keyup', function (e) {

b.innerText = e.target.value;

});

</script>

vue的双向绑定

但是所谓双向绑定,所谓MVC,所谓MVVM,都强调的是数据的改变,数据(model)即是MVC里面的M,所以我们在双向绑定中必须有数据(model).怎么加进去呢?

原理就是getter和setter函数,重写setter函数,使数据改变的同时进行一些其它的操作(改变视图),在视图改变的时候触发事件改写数据.

而怎么把数据和setter结合在一起呢?那就是利用Object.defineProperty方法,给对象定义一个属性(数据),同时重写setter方法.

代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

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

<span id="b"></span>

<script>

  var obj = {};

  Object.defineProperty(obj, 'hello', {

    set: function (newVal) {

      document.getElementById('a').value = newVal;

      document.getElementById('b').innerText = newVal;

    }

  });

  document.addEventListener('keyup', function (e) {

    obj.hello = e.target.value;

  });

</script>

</body>

</html>

可以点击下面的按钮体会一下(在输入框里面输入内容,右边会即时更新):

Document

<script>

var obj = {};

Object.defineProperty(obj, 'hello', {

set: function (newVal) {

document.getElementById('a').value = newVal;

document.getElementById('b').innerText = newVal;

}

});

document.addEventListener('keyup', function (e) {

obj.hello = e.target.value;

});

</script>

vue中的双向绑定的更多相关文章

  1. vue中数据双向绑定注意点

    最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...

  2. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  3. 利用JS实现vue中的双向绑定

    Vue 已经是主流框架了 它的好处也不用多说,都已经是大家公认的了 那我们就来理解一下Vue的单向数据绑定和双向数据绑定 然后再使用JS来实现Vue的双向数据绑定 单向数据绑定 指的是我们先把模板写好 ...

  4. Vue框架之双向绑定事件

    Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...

  5. React中的“双向绑定”

    概述 React并不是一个MVVM框架,其实它连一个框架都算不上,它只是一个库,但是react生态系统中的flux却是一个MVVM框架,所以我研究了一下flux官方实现中的"双向绑定&quo ...

  6. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  7. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  8. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  9. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

随机推荐

  1. K8s部署使用CFSSL创建证书

    证书的编码格式 PEM(Privacy Enhanced Mail),通常用于数字证书认证机构(Certificate Authorities,CA),扩展名为.pem, .crt, .cer, 和  ...

  2. Python中的logging模块【转】https://www.cnblogs.com/yelin/p/6600325.html

    [转]https://www.cnblogs.com/yelin/p/6600325.html 基本用法 下面的代码展示了logging最基本的用法. 1 # -*- coding: utf-8 -* ...

  3. flume知识点总结

    首先介绍一下在flume中常用的一个数据格式,以及使用该格式的优缺点:  从flume写数据到hdfs中的时候,使用二进制格式相对于使用纯文本来说是一种更好的选择,因为大多数二进制格式都有一些方法指明 ...

  4. Windbg驱动双机调试环境配置

    [由于进入了Windows驱动编程领域第一步就是搭建环境,整个环境来说说难也不难,只是比较麻烦.文章有些地方比较繁琐的,而且别人写的比较好,作为引用参考直接贴连接了.如果你按照我写的一步步完成,很快就 ...

  5. idea2017启动ssm项目卡在build阶段后报outofmemory

    如上图,设置build process heap size(Mbytes)(构建过程堆大小(单位MB))为4000,即约4GB.之前设置的是700,修改之后问题解决. 补充:导入新项目后,此参数会初始 ...

  6. 定义一个包含标签inclusion_tag, 调用模板时报错.. 应该是路径 不对吧...我的templates 是放在app 目录下的.<待处理>

    # 自定义模板标签. 标签的作用,在模板中 实现逻辑,如if ,for 等 from django.template import Library from datetime import datet ...

  7. Codeforces Round #554 (Div. 2)-C（gcd应用）

    题目链接:https://codeforces.com/contest/1152/problem/C 题意:给定a,b(<1e9).求使得lcm(a+k,b+k)最小的k,若有多个k,求最小的k ...

  8. 使用__slots__节省python内存技巧

    __slots__作用 __slots__有一个作用是:限制类实例绑定的属性,但是它有一个更重要的作用就是节省内存,当然更适用于数据量大的情况(万量级以上). __slots__节省内存的原理 cla ...

  9. Spring Kafka中关于Kafka的配置参数

    #################consumer的配置参数(开始)################# #如果'enable.auto.commit'为true,则消费者偏移自动提交给Kafka的频率 ...

  10. Python开发——数据类型【字符串格式化】

    字符串格式化之——% # 字符串格式化 msg = 'I am %s , My hobby is %s'%('yuan','play') print(msg) # I am yuan , My hob ...