根据对象的访问器属性去监听对象属性的变化，访问器属性不能直接在对象中设置，而必须通过 defineProperty() 方法单独定义。 访问器属性的"值"比较特殊，读取或设置访问器属性的值，实际上是调用其内部特性：get和set函数。

下面通过一个实例解释下双向数据的过程：

通过创建一个obj对象，然后设置一个访问器属性hello，然后监听文本框的一个keyup事件，调用回调函数，重新设置obj.hello属性，其实际上是去调用内部属性set方法，在set方法更改文本框的value和p标签的innerHTML,从而达到数据的绑定。get 和 set 方法内部的 this 都指向 obj，这意味着 get 和 set 函数可以操作对象内部的值。另外，访问器属性的会"覆盖"同名的普通属性，因为访问器属性会被优先访问，与其同名的普通属性则会被忽略。

原生js简单实现双向数据绑定原理的更多相关文章

  1. JavaScript实现简单的双向数据绑定

    什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...

  2. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

  3. 深入vue源码，了解vue的双向数据绑定原理

    大家都知道vue是一种MVVM开发模式,数据驱动视图的前端框架,并且内部已经实现了双向数据绑定,那么双向数据绑定是怎么实现的呢? 先手动撸一个最最最简单的双向数据绑定 <div> < ...

  4. vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

  5. 五十行javascript代码实现简单的双向数据绑定

    五十行javascript代码实现简单的双向数据绑定 Vue框架想必从事前端开发的同学都使用过,它的双向数据绑定机制能给我们带来很大的方便.今天闲着没事,尝试着实现一下双向数据绑定,接下来给大家分享一 ...

  6. 利用ES6中的Proxy和Reflect 实现简单的双向数据绑定

    利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo. 好像vue3也把 obj.defineProperty()  换成了Proxy+Reflect. 话不多说 ...

  7. Vue双向数据绑定原理深度解析

    首先,什么是双向数据绑定?Vue是三大MVVM框架之一,数据绑定简单来说,就是当数据发生变化时,相应的视图会进行更新,当视图更新时,数据也会跟着变化. 在分析其原理和代码的时候,大家首先了解如下几个j ...

  8. Vue.js 3.x 双向绑定原理

    什么是双向绑定? 废话不多说,我们先来看一个 v-model 基本的示例: <input type="text" v-model="search"> ...

  9. 原生js简单调用百度翻译API实现的翻译工具

    先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...

随机推荐

  1. 从零开始的JS生活（一）——JS简介、变量及基本结构

    本K在经过三个静态站制作的狂风暴雨之后,终于开始了JavaScript的学习.作为一只从来没有正儿八经接受过计算机语言的小白,居然能够跟上浩哥的课程进度,我的内心都被我的才智震惊到了,果然本K是天生丽 ...

  2. Web前端的路该怎么走？很迷茫

    “路漫漫其修远兮,吾将上下而求索”,这句出自<离骚>. 虽然端午已过,但是还是不影响一个程序员想表(zhuang)达(boy)自己此刻心情的冲动. 偶然路过同事旁边,不(tou)小(kan ...

  3. XtraBackup物理备份 阿里云的Mysql备份方案

    XtraBackup物理备份 Percona XtraBackup是世界上唯一的开源,免费的MySQL热备份软件,为InnoDB和XtraDB 数据库执行非阻塞备份.使用Percona XtraBac ...

  4. winform / Dev全局皮肤组件

    话不多说先上效果图. 由于这是单独的测试项目, 用于演示Dev控件的皮肤样式, 所以上面只是演示了部分控件的效果. 下面则是一些实际项目中的截图: Dev的控件样式不仅美观丰富, 上面仅皮肤设置就有4 ...

  5. java中String与StringBuffer拼接的区别

    学习笔记: 1.String拼接会创建一个新的String对象,存储拼接后的字符串: StringBuffer拼接是直接在本身拼接,会即时刷新. 2.String只能拼接String类型的字符串: S ...

  6. php获取二维数组中某一列的值集合

    $result //二维数组$uid_list = array_column($result, 'uid');

  7. mysql 修改表结构的字段名

    alter table domains  change STATUS  status  tinyint(1)  not null;

  8. Example012点击修改属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Openfire的web插件开发

    概要 Openfire不仅支持普通插件开发,还支持完整的web插件开发,这次就web插件开发做一个小的实例,本文主要讲解如何加入Servlet和Jsp页面,基本插件的开发请参照上一篇文章. 准备 系统 ...

  10. tokuDB 安装与备份小记

    线上的数据增长越来越快,数据量的增长也愈来愈大,尤其是日志类数据,这对于数据迁移.数据备份恢复而言,都是一个非常大的挑战. 于是想到了 13 年开源 tokuDB 存储引擎,来解决我们迫在眉睫的容量问 ...