自从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. css中如何做到容器按比例缩放

    需求: 一般在响应式中,我们会要求视频的宽高比为16:9或4:3,这么一来就比较头大了.当用户改变浏览器宽度的时候(改变高度不考虑),视频的宽度变了,那么高度也得根据我们要求的16:9或4:3改变. ...

  2. MyEclipse 配置 Tomcat

    安装好Tomcat,MyEclipse 之后,利用这两个工具可以开发部署Web 应用,步骤相对手动部署要简洁的多,这里有一个特别要注意的地方:系统里安装JDK.Tomcat.MyEclipse 的版本 ...

  3. [转帖]前端-chromeF12 谷歌开发者工具详解 Console篇

    前端-chromeF12 谷歌开发者工具详解 Console篇 https://blog.csdn.net/qq_39892932/article/details/82655866 趁着搞 cloud ...

  4. 【译】Six Open Source Dashboards to Organize Your Data

    作者:Ben Gregory on Jun 29, 2016   译者:carsonzhu 在天文学家看来,我们相信每个组织都可以从数据的正确集中,组织和清理中受益. 我们正在建立一个公司来做到这一点 ...

  5. 部署ingress及使用

    一.下载yaml文件 wget https://raw.githubusercontent.com/kubernetes/ingress-nginx/master/deploy/mandatory.y ...

  6. Java多线程之通过标识关闭线程

    package org.study2.javabase.ThreadsDemo.status; /** * @Auther:GongXingRui * @Date:2018/9/19 * @Descr ...

  7. 一、VS2017支持Github

    选择 工具-->扩展和更新,搜索GitHub,安装GitHub的VS插件 安装完插件,打开视图-->团队资源管理器,我们可以看到Git插件菜单.通过菜单我们可以新建Git存储库,可以提交修 ...

  8. Linux常见操作

    前面的话 本文将详细介绍Linux常见操作 基本概念 Linux严格区分大小写,所有内容以文件形式保存,包括硬件 Linux没有扩展名的概念,不靠扩展名来区分文件类型.但有一些约定俗成的扩展名 压缩包 ...

  9. 如何在虚拟机下配置centOS7

    链接地址:https://baijiahao.baidu.com/s?id=1597320700700593557&wfr=spider&for=pc

  10. WC2019游记 && 课件

    WC2019 游记 课件 wc2019.zip_免费高速下载|百度网盘-分享无限制 提取码: un6z day 0 打飞机去广州... 在飞机上刷了爱乐(le)之城, 相当好看... 广二好大! 哈三 ...