自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽。比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能低下了。有时候改了一个地方,脏循环要循环多次来保证数据是不是真的变了和是否停止变化了。这样性能就很低了。于是人们开始钻研新的双向数据binding的方法。尤大的vue binding就是本人蛮喜欢的一种实现方式,本文跟随尤大的一个例子来详解vue的数据binding的原理。

数据binding,一般也就是正则匹配到元素中的模板,然后代码切换为程序员给的data。双向binding除了脏检查机制,尤大用es5的defineProperty来实现的双向数据binding,拦截了对象的set和get方法,这个就比较有效了。同样的avalon也是此方法,用正美的话说:“我只是在var data = 1的时候拦截了’=‘“。原理都是一样的。我们直接上例子:(这里跟随尤大的脚步)(复制可用)

<!DOCTYPE html>
<html>
<head>
<title>ideal</title>
<meta charset="utf-8">
</head>
<body>
<div id="test">
<p>{{msg}}</p>
<p>{{msg}}</p>
<p>{{msg}}</p>
<p>{{what}}</p>
<p>{{hey}}</p>
</div>
<script>
var bindingMark = 'data-element-binding'
function Element (id, initData) {
var self = this,
el = self.el = document.getElementById(id)
bindings = {} //内部暂存绑定数据及dom
data = self.data = {} //存储bingding数据并实现监控
content = el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken)
el.innerHTML = content for (var variable in bindings) {
bind(variable); //将每个数据的名称比如'msg'绑定到data
}
if (initData) {
for (var variable in initData) {
data[variable] = initData[variable]
}
}
function markToken (match, variable) {
bindings[variable] = {} //bindings里存储了数据来源的字段比如bindings['msg']
return '<span ' + bindingMark + '="' + variable +'"></span>'
}
function bind (variable) {
bindings[variable].els = el.querySelectorAll('[' + bindingMark + '="' + variable + '"]')//bindings里再存储msg绑定的元素
;[].forEach.call(bindings[variable].els, function (e) { //删除data-element-binding属性
e.removeAttribute(bindingMark)
})
Object.defineProperty(data, variable, { //es5观察属性
set: function (newVal) {
[].forEach.call(bindings[variable].els, function (e) {
bindings[variable].value = e.textContent = newVal //=>这里才是实现的绑定,更新数据到dom并更新内部暂存数据
})
},
get: function () {
return bindings[variable].value //取数据仅仅是内部暂存的数据
}
})
}
} var app = new Element('test', {
msg: 'hello',
what: 'hi'
}) </script>
</body>
</html>

这应该就是vue数据binding的原理了。一些地方都写在注释了。

这个数据binding的流程是怎样的?

开始弄一个属性占位符data-element-binding,正则把原元素的内容加个标签再加上此属性,属性的值是绑定的值的key,比如msg是hello,则data-element-binding=”msg“,同时在匹配的时候把这个key存到bindings对象里面,bindings暂存绑定数据。

遍历bindings对象,再把每个存在data-element-binding的元素以它的key(比如msg)存到bindings里面,然后删除dom中的data-element-binding属性。

最重要的是:它维护了一个data对象,这个data对象是binding的关键,他是m和v的接口。他循环定义属性key(比如msg),然后在set的时候更新dom的数据,完成的binding,也就是劫持了”=“的操作,并且把这个值存到bindings里暂存。set的时候返回的是bindings里面的暂存数据。这样的好处就是我始终是使用js的原生方法,我改变data就会实现双向的绑定。v=>m的binding只需要一个onchange事件就可以,避免了循环的检查。

vue的单项绑定就是这样了,有趣的地方是你在控制台修改data的属性,p标签的内容也会相应改变,这正是es5 set方法的特点,这样的双向绑定是好维护并且没有副作用的,而且性能还是很强大的。

那见识过vue的数据绑定以后我们实现一个input的双向数据绑定(跟源码不一样的说)

其实input的双向binding很简单,因为vue已经帮我们做好了data属性,那么我在操作data的时候实际上已经完成了m到v的双向绑定。那么原理很简单,onkey的时候就修改data数据就好了。先上代码:(复制可用)

<!DOCTYPE html>
<html>
<head>
<title>ideal</title>
<meta charset="utf-8">
</head>
<body>
<input class="test" type="text" name="asd" onkeyup ="handleChange()" v-model="hey">
<input class="test" type="" name="" onkeyup ="handleChange()" v-model="msg">
<script>
var bindingMark = 'data-element-binding'
function Element (classa, initData) {
var self = this,
el = self.el = document.getElementsByClassName(classa),//多个input改为class
bindings = {}
data = self.data = {}
for (var i = 0; i < el.length; i++) {
content = el[i].outerHTML.replace(/v-model=\"(.*)\"/g, markToken);
el[i].outerHTML = content
}
for (var variable in bindings) {
bind(variable);
}
if (initData) {
for (var variable in initData) {
data[variable] = initData[variable]
}
}
function markToken (match, variable) {
bindings[variable] = {}
return bindingMark + '="' + variable +'"' //内填一个span变为只改它的元素
}
function bind (variable) { bindings[variable].els = document.querySelectorAll('[' + bindingMark + '="' + variable + '"]')//document获取binding元素
;
Object.defineProperty(data, variable, {
set: function (newVal) {
[].forEach.call(bindings[variable].els, function (e) {
bindings[variable].value = e.value = newVal //=>textContent改为input的value
})
},
get: function () {
return bindings[variable].value
}
})
}
} var app = new Element('test', {
msg: 'hello',
hey:'aaa'
})
function handleChange(e){ //增加v=>m的绑定
e = e || window.event
var key = e.target.outerHTML.match(/data-element-binding=\"(.*)\"/)[1];
data[key] = e.target.value
console.log(data.hey,data.msg);
}
</script>
</body>
</html>

修改的地方也注释了,结果会看到当我打开的时候,input已经被binding了msg和hey:

当我有输入的时候:

当我操作data的时候:

双向binding已经ok,么么哒。

vue2.0 is comming!

详解vue的数据binding原理的更多相关文章

  1. 详解 vue 双向数据绑定的原理,并实现一组双向数据绑定

    1:vue 双向数据绑定的原理: Object.defineProperty是ES5新增的一个API,其作用是给对象的属性增加更多的控制Object.defineProperty(obj, prop, ...

  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. 详解Vue 方法与事件处理器

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

  6. 详解Kafka: 大数据开发最火的核心技术

    详解Kafka: 大数据开发最火的核心技术   架构师技术联盟 2019-06-10 09:23:51 本文共3268个字,预计阅读需要9分钟. 广告 大数据时代来临,如果你还不知道Kafka那你就真 ...

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

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

  8. LigerUI之Grid使用详解(三)——字典数据展示

    一.问题概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率.在关于LigerGrid的前两篇的内容里,给大家 ...

  9. OPCode详解及汇编与反汇编原理

    1. 何为OPCode 在计算机科学领域中,操作码(Operation Code, OPCode)被用于描述机器语言指令中,指定要执行某种操作的那部分机器码,构成OPCode的指令格式和规范由处理器的 ...

随机推荐

  1. IdentityServer4【Topic】之定义资源

    Defining Resources 定义资源 你在系统中通常定义的第一件事是你想要保护的资源.这可能是你的用户的身份信息,比如个人资料数据或电子邮件地址,或者访问api. 你可以通过C#对象模型(内 ...

  2. pl/sql实现打印九九乘法表

    学习PL/SQL循环的时候写的,记录一下. declare v_number1 ); -- 外层循环变量 v_number2 ); -- 内层循环变量 begin .. -- 开始外层循环 loop ...

  3. Mysql DBA 运维 MySQL数据库索引优化及数据丢失案例 MySQL备份-增量备份及数据恢复基础实战 MySQL数据库生产场景核心优化

    需要的联系我,QQ:1844912514

  4. Day 4-6 xml处理

    xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融行业的很多系统的 ...

  5. keras中TimeDistributed的用法

    TimeDistributed这个层还是比较难理解的.事实上通过这个层我们可以实现从二维像三维的过渡,甚至通过这个层的包装,我们可以实现图像分类视频分类的转化. 考虑一批32个样本,其中每个样本是一个 ...

  6. 老男孩python学习自修第二十四天【多进程】

    1. 体验多进程的运行速度 #!/usr/bin/env python # _*_ coding:UTF-8 _*_ from multiprocessing import Pool import t ...

  7. yii2的下载安装

    1.直接使用归档文件安装yii2的高级模板: 从 yiiframework.com 下载归档文件. 下载yii2的高级模板的压缩文件, 将yii-advanced-app-2.0.12文件夹复制到项目 ...

  8. 三、K8S成功

    kubeadm join 172.17.149.114:6443 --token yjogpa.kk85u2i4n5rt1omq --discovery-token-ca-cert-hash sha2 ...

  9. How to enable mp3 on Ubuntu

    apt install gstreamer1.0 libavcodec57

  10. 时频工具箱tftb

    安装:set path 常规里更新 一.信号产生函数: amexpo1s  单边指数幅值调制信号amexpo2s  双边指数幅值调制信号amgauss  高斯幅值调制信号amrect  矩形幅值调制信 ...