自从角火了以后,各种mvc框架喷涌而出,角虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽。比如坑爹的脏检查机制,数据绑定是受人喜爱的,脏检查就有点…性能低下了。有时候改了一个地方,脏循环要循环多次来保证数据是不是真的变了和是否停止变化了。这样性能就很低了。于是人们开始钻研新的双向数据绑定的方法。尤大的vue绑定就是本人蛮喜欢的一种实现方式,本文跟随尤大的一个例子来详解vue的数据绑定的原理。
数据绑定,一般也就是正则匹配到元素中的模板,然后代码切换为程序员给的数据。双向绑定除了脏检查机制,尤大用es5的defineProperty来实现的双向数据绑定,拦截了对象的设置和获取方法,这个就比较有效了。同样的阿瓦隆也是此方法,用正美的话说:“我只是在var data=https://www.yisu.com/zixun/1的时候拦截了‘=薄Ｔ矶际且谎摹Ｎ颐侵苯由侠?(这里跟随尤大的脚步)(复制可用)
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> ideal
& lt;元charset=皍tf - 8”比;
& lt;/head>
& lt; body>
& lt; div id=安馐浴北?
& lt; p>{{味精}}& lt;/p>
& lt; p>{{味精}}& lt;/p>
& lt; p>{{味精}}& lt;/p>
& lt; p>{{什么}}& lt;/p>
& lt; p>{{嘿}}& lt;/p>
& lt;/div>
& lt; script>
var bindingMark=' data-element-binding '
函数元素(id、initData) {
var自我=,
el=自我。el=. getelementbyid (id)
绑定={}//内部暂存绑定数据及dom
数据=https://www.yisu.com/zixun/self.data={}//存储总数据并实现监控
内容=el.innerHTML.replace (//{(. *)/}/{}/g, markToken)
埃尔。innerHTML=内容
绑定的变量(var) {
绑定(变量);//将每个数据的名称比如“味精”绑定到数据
}
如果(initData) {
(var变量initData) {
数据(变量)=initData(变量)
}
}
markToken(匹配函数,变量){
绑定(变量)={}//绑定里存储了数据来源的字段比如绑定(“味精”)
返回的& lt;跨越“+ bindingMark +”=?变量+”祝辞& lt;/span>”
}
函数bind(变量){
绑定(变量)。els=el。querySelectorAll (' (' + bindingMark + '=" +变量+”]”)//绑定里再存储味精绑定的元素
(变量);[].forEach.call(绑定。els)、功能(e){//删除data-element-binding属性
e.removeAttribute (bindingMark)
}）
Object.defineProperty(数据、变量、{//es5观察属性
设置:函数(newVal) {
[].forEach.call(绑定(变量)。els)、功能(e) {
绑定(变量)。值=https://www.yisu.com/zixun/e.textContent=newVal//=>这里才是实现的绑定,更新数据到dom并更新内部暂存数据
}）
},
得到:函数(){
返回绑定(变量)。//值取数据仅仅是内部暂存的数据
}
}）
}
}
应用var=新元素(“测试”,{
味精:“你好”,
:“你好”
}）
& lt;/script>
& lt;/body>
& lt;/html>
之前
这应该就是vue数据绑定的原理了。一些地方都写在注释了。
<强>这个数据绑定的流程是怎样的?
开始弄一个属性占位符data-element-binding,正则把原元素的内容加个标签再加上此属性,属性的值是绑定的值的键,比如味精是你好,则data-element-binding=拔毒?同时在匹配的时候把这个关键存到绑定对象里面,绑定暂存绑定数据。
遍历绑定对象,再把每个存在data-element-binding的元素以它的关键(比如味精)存到绑定里面,然后删除dom中的data-element-binding属性。
<强>最重要的是:它维护了一个数据对象,这个数据对象是绑定的关键,他是m和v的接口。他循环定义属性关键(比如味精),然后在设置的时候更新dom的数据,完成的绑定,也就是劫持了"="的操作,并且把这个值存到绑定里暂存这里的时候返回的是绑定里面的暂存数据。这样的好处就是我始终是使用js的原生方法,我改变数据就会实现双向的绑定.v=祝辞m的绑定只需要一个onchange事件就可以,避免了循环的检查。
vue的单项绑定就是这样了,有趣的地方是你在控制台修改数据的属性,p标签的内容也会相应改变,这正是es5集方法的特点,这样的双向绑定是好维护并且没有副作用的,而且性能还是很强大的。
那见识过vue的数据绑定以后我们实现一个输入的双向数据绑定(跟源码不一样的说)
其实输入的双向绑定很简单,因为vue已经帮我们做好了数据属性,那么我在操作数据的时候实际上已经完成了m到v的双向绑定。那么原理很简单,onkey的时候就修改数据数据就好了。先上代码:(复制可用)
