剖析vue原理&实现双向绑定mvvm -凯发k8国际

0顶
0踩

剖析vue原理&实现双向绑定mvvm

2017-01-05 14:17 by 副主编 jihong10102006 评论(1) 有8015人浏览

vue mvvm 双向绑定框架

声明：iteye资讯文章的凯发k8国际的版权属于iteye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

引用

【前言】本文将帮助大家了解vue的双向数据绑定原理、核心代码模块，以及如何实现双向绑定。为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助。

所有相关代码均详见github：

相信大家对mvvm双向绑定应该都不陌生了，一言不合上代码，下面先看一个本文最终实现的效果吧，和vue一样的语法，如果还不了解双向绑定，猛戳。

效果：

几种实现双向绑定的做法
目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和view，并没有多高深。所以无需太过介怀是实现的单向或双向绑定。

实现数据绑定的做法有大致如下几种：

发布者-订阅者模式（backbone.js）
脏值检查（angular.js）
数据劫持（vue.js）

发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是vm.set('property', value)，这里有篇文章讲的比较详细，有兴趣可。

但我们更希望通过vm.property = value这种方式更新数据，同时自动更新视图，于是有了下面两种方式：

脏值检查：angular.js是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过setinterval()定时轮询检测数据变动，当然google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下：

dom事件，譬如用户输入文本，点击按钮等。(ng-click)
xhr响应事件 ($http)
浏览器location变更事件 ($location)
timer事件($timeout , $interval)
执行$digest()或$apply()

数据劫持：vue.js则是采用数据劫持结合发布者-订阅者模式的方式，通过object.defineproperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

思路整理
已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过object.defineproperty()来实现对属性的劫持，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一，如果不熟悉defineproperty，可以点击查看。

整理了一下，要实现mvvm的双向绑定，就必须要实现以下几点：

实现一个数据监听器observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
实现一个指令解析器compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
实现一个watcher，作为连接observer和compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
mvvm入口函数，整合以上三者

上述流程如图所示：

1、实现observer
ok, 思路已经整理完毕，也已经比较明确相关逻辑和模块功能了，let’s do it！

我们知道可以利用obeject.defineproperty()来监听属性变动
那么将需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter，这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到数据变化。相关代码可以是这样：

这样我们已经可以监听每个数据的变化了，那么监听到变化之后就是怎么通知订阅者了，所以接下来我们需要实现一个消息订阅器，很简单，维护一个数组，用来收集订阅者，数据变动触发notify，再调用订阅者的update方法，代码改善之后是这样：

那么问题来了，谁是订阅者？怎么往订阅器添加订阅者？

没错，上面的思路整理中我们已经明确订阅者应该是watcher，而且var dep = new dep();是在definereactive方法内部定义的，所以想通过dep添加订阅者，就必须要在闭包内操作，所以我们可以在getter里面动手脚：

这里已经实现了一个observer了，已经具备了监听数据和数据变化通知订阅者的功能。那么接下来就是实现compile了。

2、实现compile
compile主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图，如图所示：

因为遍历解析的过程有多次操作dom节点，为提高性能和效率，会先将跟节点el转换成文档碎片fragment进行解析编译操作，解析完成，再将fragment添加回原来的真实dom节点中：

compileelement方法将遍历所有节点及其子节点，进行扫描解析编译，调用对应的指令渲染函数进行数据渲染，并调用对应的指令更新函数进行绑定，详看代码及注释说明：

这里通过递归遍历保证了每个节点及子节点都会解析编译到，包括了{{}}表达式声明的文本节点。指令的声明规定是通过特定前缀的节点属性来标记，如
监听数据、绑定更新函数的处理是在compileutil.bind()这个方法中，通过new watcher()添加回调来接收数据变化的通知。

至此，一个简单的compile就完成了。接下来要看看watcher这个订阅者的具体实现了。

3、实现watcher
watcher订阅者作为observer和compile之间通信的桥梁，主要做的事情是:

在自身实例化时往属性订阅器(dep)里面添加自己；
自身必须有一个update()方法；
待属性变动dep.notice()通知时，能调用自身的update()方法，并触发compile中绑定的回调，则功成身退。

如果有点乱，可以回顾下前面的思路整理：

实例化watcher的时候，调用get()方法，通过dep.target = watcherinstance标记订阅者是当前watcher实例，强行触发属性定义的getter方法，getter方法执行的时候，就会在属性的订阅器dep添加当前watcher实例，从而在属性值有变化的时候，watcherinstance就能收到更新通知。

ok，watcher也已经实现了。

基本上vue中数据绑定相关比较核心的几个模块也是这几个，点击此处，在src目录可找到vue源码。最后来讲讲mvvm入口文件的相关逻辑和实现吧，相对就比较简单了。

4、实现mvvm
mvvm作为数据绑定的入口，整合observer、compile和watcher三者，通过observer来监听自己的model数据变化，通过compile来解析编译模板指令，最终利用watcher搭起observer和compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

一个简单的mvvm构造器是这样子：

但是这里有个问题，从代码中可看出监听的数据对象是options.data，每次需要更新视图，则必须通过var vm = new mvvm({data:{name: 'kindeng'}}); vm._data.name = 'dmq';这样的方式来改变数据。

显然不符合我们一开始的期望，我们所期望的调用方式应该是这样的：var vm = new mvvm({data: {name: 'kindeng'}}); vm.name = 'dmq';

所以这里需要给mvvm实例添加一个属性代理的方法，使访问vm的属性代理为访问vm._data的属性，改造后的代码如下：

这里主要还是利用了object.defineproperty()这个方法来劫持了vm实例对象的属性的读写权，使读写vm实例的属性转成读写了vm._data的属性值，达到鱼目混珠的效果。

至此，全部模块和功能已经完成了，如本文开头所承诺的两点。一个简单的mvvm模块已经实现，其思想和原理大部分来自经过简化改造的vue源码，在可以看到本文的所有相关代码。

由于本文内容偏实践，所以代码量较多，且不宜列出大篇幅代码，所以建议想深入了解的童鞋可以再次结合本文源代码来进行阅读，这样会更加容易理解和掌握。

总结
本文主要围绕“几种实现双向绑定的做法”、“实现observer”、“实现compile”、“实现watcher”、“实现mvvm”这几个模块来阐述双向绑定的原理和实现。并根据思路流程渐进梳理讲解了一些细节思路和比较关键的内容点，以及通过展示部分关键代码讲述怎样一步步实现一个双向绑定mvvm。文中可能会有一些不够严谨的思考和错误，欢迎大家指正，有兴趣欢迎一起探讨和改进。

引用

声明：本文来自腾讯增值产品部官方公众号小时光茶社，为csdn原创投稿，未经许可，禁止任何形式的转载。
作者：邓木琴，腾讯前端工程师，手q阅读前端开发，参与过手q阅读、企鹅电竞、原创社区等项目。热衷于新技术研究，处女座，典型强迫症患者，注重细节。
责编：钱曙光，关注架构和算法领域，寻求报道或者投稿请发邮件qianshg@csdn.net，另有「csdn 高级架构师群」，内有诸多知名互联网公司的大牛架构师，欢迎架构师加微信qianshuguangarch申请入群，备注姓名公司职位。

分享到：

0
顶

0
踩

评论共 1 条请登录后发表评论

1 楼 2017-01-09 10:05

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

主要为大家剖析了vue原理，实现双向绑定mvvm，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

今天的文字就这么多，明白的，不明白的，就这些吧。

由一场撞击事件引发的黑客大战，80000人参与、被攻击网站超4000多个……这场看似没有硝烟的战争当时是何情景？让我们梦回2001，一起看看吧。 “81192无法返航” ——“呼叫81192，这里是553，我奉命接替你机执行巡航任务，请返航！” ——“81192收到，我已无法返航，你们继续前进，...

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变核心( vue2.0 )：通过object.defineproperty（）来劫持...

管理系统是一种通过计算机技术实现的用于组织、监控和控制各种活动的软件系统。这些系统通常被设计用来提高效率、减少错误、加强安全性，同时提供数据和信息支持。以下是一些常见类型的管理系统：学校管理系统：用于学校或教育机构的学生信息、教职员工信息、课程管理、成绩记录、考勤管理等。学校管理系统帮助提高学校的组织效率和信息管理水平。人力资源管理系统（hrm）：用于处理组织内的人事信息，包括员工招聘、培训记录、薪资管理、绩效评估等。hrm系统有助于企业更有效地管理人力资源，提高员工的工作效率和满意度。库存管理系统：用于追踪和管理商品或原材料的库存。这种系统可以帮助企业避免库存过剩或不足的问题，提高供应链的效率。客户关系管理系统（crm）：用于管理与客户之间的关系，包括客户信息、沟通记录、销售机会跟踪等。crm系统有助于企业更好地理解客户需求，提高客户满意度和保留率。医院管理系统：用于管理医院或医疗机构的患者信息、医生排班、药品库存等。这种系统可以提高医疗服务的质量和效率。财务管理系统：用于记录和管理组织的财务信息，包括会计凭证、财务报表、预算管理等。财务管理系统

gb2312字符集作用：国家简体中文字符集，兼容ascii。位数：使用2个字节表示，能表示7445个符号，包括6763个汉字，几乎覆盖所有高频率汉字。范围：高字节从a1到f7, 低字节从a1到fe。将高字节和低字节分别加上0xa0即可得到编码。 gbk字符集作用：它是gb2312的扩展，加入对繁体字的支持，兼容gb2312。位数：使用2个字节表示，可表示21886个字符。范围：高字节从81到fe，低字节从40到fe。 gb18030字符集作用：它解决了中文、日文、朝鲜语等的编码，兼容gbk。位数：它采用变字节表示(1 ascii，2，4字节)。可表示27484个文字。范围：1字节从00到7f; 2字节高字节从81到fe，低字节从40到7e和80到fe；4字节第一三字节从81到fe，第二四字节从30到39。

毕业设计，安卓app，基于java开发的学生成绩课件管理系统app，包括pc端和安卓anroid手机app，内含java完整源码安卓andriod学生成绩课件管理系统系统开发环境: windows myclipse(服务器端) eclipse(手机客户端) mysql数据库服务器也可以用eclipse或者idea等工具，客户端也可以采用android studio工具！系统客户端和服务器端架构技术: 界面层，业务逻辑层，数据层3层分离技术，mvc设计思想！服务器和客户端数据通信格式：json格式,采用servlet方式【服务器端采用ssh框架，请自己启动tomcat服务器，hibernate会自动生成数据库表的哈！】 hibernate生成数据库表后，只需要在admin管理员表中加个测试账号密码就可以登录后台了哈！下面是数据库的字段说明：班级: 班级编号,班级名称,开办日期,班主任学生: 学号,登录密码,所在班级,姓名,性别,出生日期,学生照片,联系电话,家庭地址老师: 教师编号,登录密码,姓名,性别,出生日期,联系电话,邮件,地址,

软件开发设计：php、qt、应用软件开发、系统软件开发、移动应用开发、网站开发c 、java、python、web、c#等语言的项目开发与学习资料硬件与设备：单片机、eda、proteus、rtos、包括计算机硬件、服务器、网络设备、存储设备、移动设备等操作系统：linux、ios、树莓派、安卓开发、微机操作系统、网络操作系统、分布式操作系统等。此外，还有嵌入式操作系统、智能操作系统等。网络与通信：数据传输、信号处理、网络协议、网络与通信硬件、网络安全网络与通信是一个非常广泛的领域，它涉及到计算机科学、电子工程、数学等多个学科的知识。云计算与大数据：数据集、包括云计算平台、大数据分析、人工智能、机器学习等，云计算是一种基于互联网的计算方式，通过这种方式，共享的软硬件资源和信息可以按需提供给计算机和其他设备。

企业定价策略分销策略与促销策略.docx

安川 a1000 闭环矢量设定表

数据集介绍，下载本资源后，界面如下：有两个文件夹一个是存放数据集的文件。数据集介绍：一共含有:130个类别，数据集图片数量超过:7700张,包含:'abigail_williams_(fate)', 'aegis_(persona)', 'aisaka_taiga', 'albedo', 'anastasia_(idolmaster)', 'aqua_(konosuba)', 'arcueid_brunestud', 'asia_argento', 'astolfo_(fate)', 'asuna_(sao)', 'atago_(azur_lane)', 'ayanami_rei', 'belfast_(azur_lane)', 'bremerton_(azur_lane)', 'c.c', 'chitanda_eru', 'chloe_von_einzbern', 'cleveland_(azur_lane)', 'd.va_(overwatch)', 'dido_(azur_lane)', 'emilia_rezero', 'enterprise_(azur_lane)',

采用字符窗体界面，用python语言编写，数据库使用sql server2015.使用pymssql包进行python与数据库的交互管理系统是一种通过计算机技术实现的用于组织、监控和控制各种活动的软件系统。这些系统通常被设计用来提高效率、减少错误、加强安全性，同时提供数据和信息支持。以下是一些常见类型的管理系统：学校管理系统：用于学校或教育机构的学生信息、教职员工信息、课程管理、成绩记录、考勤管理等。学校管理系统帮助提高学校的组织效率和信息管理水平。人力资源管理系统（hrm）：用于处理组织内的人事信息，包括员工招聘、培训记录、薪资管理、绩效评估等。hrm系统有助于企业更有效地管理人力资源，提高员工的工作效率和满意度。库存管理系统：用于追踪和管理商品或原材料的库存。这种系统可以帮助企业避免库存过剩或不足的问题，提高供应链的效率。客户关系管理系统（crm）：用于管理与客户之间的关系，包括客户信息、沟通记录、销售机会跟踪等。crm系统有助于企业更好地理解客户需求，提高客户满意度和保留率。医院管理系统：用于管理医院或医疗机构的患者信息、医生排班、药品库存等。这种系统可以提高医疗服务的质量和效率。财务管理系统：用于记录和管理组织的财务信息，包括会计凭证、财务报表、预算管理等。财务管理系统

剖析vue原理&实现双向绑定mvvm -凯发k8国际

0顶0踩