1:vue 双向数据绑定的原理:

Object.defineProperty是ES5新增的一个API,其作用是给对象的属性增加更多的控制
Object.defineProperty(obj, prop, descriptor)
参数 obj: 需要定义属性的对象(目标对象)
prop: 需被定义或修改的属性名(对象上的属性或者方法)
对于setter和getter,我的理解是它们是一对勾子(hook)函数,当你对一个对象的某个属性赋值时,则会自动调用相应的setert函数;而当获取属性时,则调用getter函数。这也是实现双向数据绑定的关键。

2:自己实现一个双向数据绑定:


<div id="app">
<input type="text" id="txt">
<p id="show-txt"></p>
</div> var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
}, set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show-txt').innerHTML = newValue
}
}) document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})

来源:https://segmentfault.com/a/1190000016240984

详解 vue 双向数据绑定的原理,并实现一组双向数据绑定的更多相关文章

  1. 详解vue的数据binding原理

    自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...

  2. 详解vue的diff算法原理

    我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时,vue ...

  3. 详解Vue中的computed和watch

    作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...

  4. 详解Vue.js 技术

    本文主要从8个章节详解vue技术揭秘,小编觉得挺有用的,分享给大家. 为了把 Vue.js 的源码讲明白,课程设计成由浅入深,分为核心.编译.扩展.生态四个方面去讲,并拆成了八个章节,如下: 准备工作 ...

  5. 详解Java GC的工作原理+Minor GC、FullGC

    详解Java GC的工作原理+Minor GC.FullGC 引用地址:http://www.blogjava.net/ldwblog/archive/2013/07/24/401919.html J ...

  6. 详解Vue 方法与事件处理器

      本篇文章主要介绍了详解Vue 方法与事件处理器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件 ...

  7. 详解vue 路由跳转四种方式 (带参数)

    详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 ...

  8. 详解Vue 如何监听Array的变化

    详解Vue 如何监听Array的变化:https://www.jb51.net/article/162584.htm

  9. 「JVM」知识点详解一:JVM运行原理详解

    前言 JVM 一直都是面试的必考点,大家都知道,但是要把它搞清楚又好像不是特别容易.JVM 的知识点太散,不系统,今天带大家详细的了解一下jvm的运行原理. 正文 1 什么是JVM? JVM是Java ...

随机推荐

  1. 谷歌将用QUIC传输层技术加速互联网

    安全这个话题,要感谢斯诺登,过去的安全就是攻和防之间的关系,即我们用一种什么样的体系.架构和模式去构建一个密不可破的安全系统.” 对IETF工作组忽视外部观察者看起来是一件甚么微不足道的事情的能力感到 ...

  2. Mybatis foreach批量插入

    1.foreach的属性 item:集合中元素迭代时的别名,必填 index:在list和array中,index是元素的序号:在map中,index是元素的key,可选 open:foreach代码 ...

  3. 转:HTML5 History API 详解

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  4. Java 统计单词频数

    输出单个文件中的 N 个英语单词出现的次数 定义双列集合,将单词不重复的读入一列中,另一列用来计数 import java.io.BufferedReader; import java.util.Ar ...

  5. es之java索引操作

    1.7.1: 创建索引 /** * 创建索引 * */ @Test public void createIndex(){ // 创建索引 CreateIndexResponse blog2 = cli ...

  6. jq和js用法:入口写法

    jq和js入口写法demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. 关于openGL、GPUImage、ios直播相关不错的博客

    http://www.jianshu.com/users/815d10a4bdce/latest_articles

  8. centos7部署前后端分离项目的过程

    概述 本文主要讲解在安装了centos7的Linux主机中部署前后端分离项目的过程. 前端项目名为:vue_project:后端项目名为:django_project. 将这两个项目放在/opt/wh ...

  9. Linux下查看分区内目录及文件占用空间容量

    转载linux下使用 du查看某个文件或目录占用磁盘空间的大小   du -ah --max-depth=1     这个是我想要的结果  a显示目录占用的磁盘空间大小,还要显示其下目录和文件占用磁盘 ...

  10. bash如何向上向下移动历史命令记录

    bash如何在 历史命令记录 中上下移动? 通过bash本身的设置,就可以做到! : 用shift+up , shift+down 来上下移动 : 单纯的up/down是调用历史命令