根据对象的访问器属性去监听对象属性的变化，访问器属性不能直接在对象中设置，而必须通过 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. epclise设置tomcat方法（步骤）（菜鸟巧记二）

    epclise设置tomcat 1.打开epclise→window→preferences 2.输入server,打开server→runtime environments→选择add新建 3.打开 ...

  2. Bash中的特殊变量和位置参量

    位置参量:向脚本或函数传递的参数,可以被set命令设置.重置和清空. 1.$$ 当前Shell的PID 2.$- 当前Shell的选项,如果是交互式shell,应该包含字符i,例如$ echo $-h ...

  3. Bash启动选项

    Bash选项可以用来控制它的行为,有两种选项:单字符选项和多字符选项,多字符选项必须出现在单字符选项以前.1)单字符选项:由一个减号和一个字符组成2)多字符选项:由两个减号和多个字符组成 常用选项:- ...

  4. vue-router单页应用简单示例（二）

    我们先来理一下思路. 图1:main.js 引入vue,App.vue,router/index.js文件 声明要渲染的Id为app,将App.vue中的模版渲染到入口界面(就是打开localhost ...

  5. Python处理Excel文件

    因为工作需求,需要审核一部分query内容是否有效,query储存在Excel中,文本内容为页面的Title,而页面的URL以HyperLink的格式关联到每个Cell. 于是本能的想到用Python ...

  6. 还原SQL SERVER系统库

    还原SQL SERVER系统库 共需还原三个系统库,还原顺序:master>msdb>model 还原master (1).数据库配置管理器->数据库服务属性->启动参数-&g ...

  7. HTML特殊布局--------双飞翼布局

    今天看到以前写的一篇布局的例子分享给大家,双飞翼布局. 什么是双飞翼布局?? 1.三列布局,中间宽度自适应,两边固定宽度; 2.中间栏在浏览器中优先展示渲染: 双飞翼布局的原理: 中间的盒子定100% ...

  8. 多行文本省略号的实现.html

    多行文本省略号的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. java执行程序的内存分析系列专栏二之static变量和方法内存分析

    昨天写了简单的聊了下java执行程序时简单的内存划分,今天我们接着往下聊,聊聊static变量和方法的内存分析. 1.static变量和方法的第一个特性内存分析 statiic变量和方法的第一个特性能 ...

  10. 14.什么是jsp动作

    JSP动作元素(action elements),动作元素为请求处理阶段提供信息.动作元素遵循XML元素的语法,有一个包含元素名的开始标签,可以有属性,可选的内容,与开始标签匹配的结束标签. 包含的类 ...