资讯频道 → 企业架构
阅读更多

0顶
0踩

企业架构

原创新闻 剖析Vue原理&实现双向绑定MVVM

2017-01-05 14:17 by 副主编 jihong10102006 评论(1) 有8240人浏览
Vue MVVM 双向绑定 框架

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

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

所有相关代码均详见GitHub：https://github.com/DMQ/mvvm


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


效果：


几种实现双向绑定的做法
目前几种主流的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方法将遍历所有节点及其子节点，进行扫描解析编译，调用对应的指令渲染函数进行数据渲染，并调用对应的指令更新函数进行绑定，详看代码及注释说明：


这里通过递归遍历保证了每个节点及子节点都会解析编译到，包括了{{}}表达式声明的文本节点。指令的声明规定是通过特定前缀的节点属性来标记，如<span v-text="content" other-attr中v-text便是指令，而other-attr不是指令，只是普通的属性。

监听数据、绑定更新函数的处理是在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申请入群，备注姓名+公司+职位。
  • 大小: 35.8 KB
  • 大小: 8.5 KB
  • 大小: 29.8 KB
  • 大小: 45.4 KB
  • 大小: 37.3 KB
  • 大小: 28.4 KB
  • 大小: 15.7 KB
  • 大小: 36.1 KB
  • 大小: 71.1 KB
  • 大小: 37.8 KB
  • 大小: 68.2 KB
  • 大小: 13.2 KB
  • 大小: 44.1 KB
0
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 semmy 2017-01-09 10:05

发表评论

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

相关推荐

  • Vue原理剖析 实现双向绑定MVVM

    Vue原理剖析实现双向绑定MVVM 本文将详细剖析Vue原理，实现双向绑定MVVM，具有一定的参考价值。主要内容包括了解Vue的双向数据绑定原理、核心代码模块、缓解好奇心的同时了解如何实现双向绑定、实现MVVM的双向绑定...

  • 81192！请返航！

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

  • 现实版的黑客大战，这可能是中国黑客做过最燃的事情了

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

  • 级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略：电压电流双闭环PI控制、相间与相内电压均衡管理,级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略：电压电流双闭环PI控制、相间与相内电压均

    级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略：电压电流双闭环PI控制、相间与相内电压均衡管理,级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略：电压电流双闭环PI控制、相间与相内电压均衡管理,不平衡电网下的svg无功补偿，级联H桥svg无功补偿statcom，采用三层控制策略。 （1）第一层采用电压电流双闭环pi控制，电压电流正负序分离，电压外环通过产生基波正序有功电流三相所有H桥模块直流侧平均电压恒定，电流内环采用前馈解耦控制； （2）第二层相间电压均衡控制，注入零序电压，控制通过注入零序电压维持相间电压平衡； （3）第三层相内电压均衡控制，使其所有子模块吸收的有功功率与其损耗补，从而保证所有H桥子模块直流侧电压值等于给定值。 有参考资料。 639,核心关键词： 1. 不平衡电网下的SVG无功补偿 2. 级联H桥SVG无功补偿STATCOM 3. 三层控制策略 4. 电压电流双闭环PI控制 5. 电压电流正负序分离 6. 直流侧平均电压恒定 7. 前馈解耦控制 8. 相间电压均衡控制 9. 零序电压注入 10. 相内电压均衡控制 以上十个关键词用分号分隔的格式为：不

  • GTX 1080 PCB图纸

    GTX 1080 PCB图纸，内含图纸查看软件

  • 深度优化与应用：提升DeepSeek润色指令的有效性和灵活性指南

    内容概要：本文档详细介绍了利用 DeepSeek 进行文本润色和问答交互时提高效果的方法和技巧，涵盖了从明确需求、提供适当上下文到尝试开放式问题以及多轮对话的十个要点。每一部分内容都提供了具体的示范案例，如指定回答格式、分步骤提问等具体实例，旨在指导用户更好地理解和运用 DeepSeek 提升工作效率和交流质量。同时文中还强调了根据不同应用场景调整提示词语气和风格的重要性和方法。 适用人群：适用于希望通过优化提问技巧以获得高质量反馈的企业员工、科研人员以及一般公众。 使用场景及目标：本文针对所有期望提高 DeepSeek 使用效率的人群，帮助他们在日常工作中快速获取精准的答案或信息，特别是在撰写报告、研究材料准备和技术咨询等方面。此外还鼓励用户通过不断尝试不同形式的问题表述来进行有效沟通。 其他说明：该文档不仅关注实际操作指引，同样重视用户思维模式转变——由简单索取答案向引导 AI 辅助创造性解决问题的方向发展。

  • 基于FPGA与W5500实现的TCP网络通信测试平台开发-Zynq扩展口Verilog编程实践,基于FPGA与W5500芯片的TCP网络通信测试及多路Socket实现基于zynq开发平台和Vivad

    基于FPGA与W5500实现的TCP网络通信测试平台开发——Zynq扩展口Verilog编程实践,基于FPGA与W5500芯片的TCP网络通信测试及多路Socket实现基于zynq开发平台和Vivado 2019软件的扩展开发,基于FPGA和W5500的TCP网络通信 测试平台 zynq扩展口开发 软件平台 vivado2019.2，纯Verilog可移植 测试环境 压力测试 cmd命令下ping电脑ip，同时采用上位机进行10ms发包回环测试，不丢包（内部数据回环，需要时间处理） 目前实现单socket功能，多路可支持 ,基于FPGA; W5500; TCP网络通信; Zynq扩展口开发; 纯Verilog可移植; 测试平台; 压力测试; 10ms发包回环测试; 单socket功能; 多路支持。,基于FPGA与W5500的Zynq扩展口TCP通信测试：可移植Verilog实现的高效网络通信

  • Labview液压比例阀伺服阀试验台多功能程序：PLC通讯、液压动画模拟、手动控制与调试、传感器标定、报警及记录、自动实验、数据处理与查询存储，报表生成与打印一体化解决方案 ,Labview液压比例阀

    Labview液压比例阀伺服阀试验台多功能程序：PLC通讯、液压动画模拟、手动控制与调试、传感器标定、报警及记录、自动实验、数据处理与查询存储，报表生成与打印一体化解决方案。,Labview液压比例阀伺服阀试验台多功能程序：PLC通讯、液压动画模拟、手动控制与调试、传感器标定、报警管理及实验自动化,labview液压比例阀伺服阀试验台程序：功能包括，同PLC通讯程序，液压动画，手动控制及调试，传感器标定，报警设置及报警记录，自动实验，数据处理曲线处理，数据库存储及查询，报表自动生成及打印，扫码枪扫码及信号录入等~ ,核心关键词：PLC通讯; 液压动画; 手动控制及调试; 传感器标定; 报警设置及记录; 自动实验; 数据处理及曲线处理; 数据库存储及查询; 报表生成及打印; 扫码枪扫码。,Labview驱动的智能液压阀测试系统：多功能控制与数据处理

  • 华为、腾讯、万科员工职业发展体系建设与实践.pptx

    华为、腾讯、万科员工职业发展体系建设与实践.pptx

  • 基于遗传算法的柔性车间调度优化 附Matlab代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • 电网不对称故障下VSG峰值电流限制的柔性控制策略：实现电流平衡与功率容量的优化利用,电网不对称故障下VSG峰值电流限制的柔性控制策略：兼顾平衡电流与功率控制切换的动态管理,电网不对称故障下VSG峰值电

    电网不对称故障下VSG峰值电流限制的柔性控制策略：实现电流平衡与功率容量的优化利用,电网不对称故障下VSG峰值电流限制的柔性控制策略：兼顾平衡电流与功率控制切换的动态管理,电网不对称故障下VSG峰值电流限制的柔性不平衡控制（文章完全复现）。 提出一种在不平衡运行条件下具有峰值电流限制的可变不平衡电流控制方法，可灵活地满足不同操作需求，包括电流平衡、有功或无功恒定运行（即电流控制、有功控制或无功控制之间的相互切），注入电流保持在安全值内，以更好的利用VSG功率容量。 关键词：VSG、平衡电流控制、有功功率控制、无功功率控制。 ,VSG; 峰值电流限制; 柔性不平衡控制; 电流平衡控制; 有功功率控制; 无功功率控制。,VSG柔性控制：在电网不对称故障下的峰值电流限制与平衡管理

  • libpinyin-tools-0.9.93-4.el7.x64-86.rpm.tar.gz

    1、文件内容：libpinyin-tools-0.9.93-4.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/libpinyin-tools-0.9.93-4.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持：公众号禅静编程坊

  • 机器学习（预测模型）：动漫《龙珠》相关的数据集

    数据集是一个以经典动漫《龙珠》为主题的多维度数据集，广泛应用于数据分析、机器学习和图像识别等领域。该数据集由多个来源整合而成，涵盖了角色信息、战斗力、剧情片段、台词以及角色图像等多个方面。数据集的核心内容包括： 角色信息：包含《龙珠》系列中的主要角色及其属性，如名称、种族、所属系列（如《龙珠》《龙珠Z》《龙珠超》等）、战斗力等级等。 图像数据：提供角色的图像资源，可用于图像分类和角色识别任务。这些图像来自动画剧集、漫画和相关衍生作品。 剧情与台词：部分数据集还包含角色在不同故事中的台词和剧情片段，可用于文本分析和自然语言处理任务。 战斗数据：记录角色在不同剧情中的战斗力变化和战斗历史，为研究角色成长和剧情发展提供支持。 数据集特点 多样性：数据集整合了角色、图像、文本等多种类型的数据，适用于多种研究场景。 深度：不仅包含角色的基本信息，还涵盖了角色的成长历程、技能描述和与其他角色的互动关系。 实用性：支持多种编程语言（如Python、R）的数据处理和分析，提供了详细的文档和示例代码。

  • 基于protues仿真的多功公交站播报系统设计（仿真图、源代码）

    基于protues仿真的多功公交站播报系统设计（仿真图、源代码） 该设计为基于protues仿真的多功公交站播报系统，实现温度显示、时间显示、和系统公交站播报功能； 具体功能如下： 1、系统使用51单片机为核心设计； 2、时钟芯片进行时间和日期显示； 3、温度传感器进行温度读取； 4、LCD12864液晶屏进行相关显示； 5、按键设置调节时间； 6、按键设置报站； 7、仿真图、源代码； 操作说明： 1、下行控制报站：首先按下（下行设置按键），（下行指示灯）亮，然后按下（手动播报）按键控制播报下一站； 2、上行控制报站：首先按上（上行设置按键），（上行指示灯）亮，然后按下（手动播报）按键控制播报下一站； 3、按下关闭播报按键，则关闭播报功能和清除显示

  • 基于微信小程序的琴房管理系统的设计与实现.zip

    采用Java后台技术和MySQL数据库，在前台界面为提升用户体验，使用Jquery、Ajax、CSS等技术进行布局。 系统包括两类用户：学生、管理员。 学生用户 学生用户只要实现了前台信息的查看，打开首页，查看网站介绍、琴房信息、在线留言、轮播图信息公告等，通过点击首页的菜单跳转到对应的功能页面菜单，包括网站首页、琴房信息、注册登录、个人中心、后台登录。 学生用户通过账户账号登录，登录后具有所有的操作权限，如果没有登录，不能在线预约。学生用户退出系统将注销个人的登录信息。 管理员通过后台的登录页面，选择管理员权限后进行登录，管理员的权限包括轮播公告管理、老师学生信息管理和信息审核管理，管理员管理后点击退出，注销登录信息。 管理员用户具有在线交流的管理，琴房信息管理、琴房预约管理。 在线交流是对前台用户留言内容进行管理，删除留言信息，查看留言信息。

  • 界面GUI设计MATLAB教室人数统计.zip

    MATLAB可以用于开发人脸识别考勤系统。下面是一个简单的示例流程： 1. 数据采集：首先收集员工的人脸图像作为训练数据集。可以要求员工提供多张照片以获得更好的训练效果。 2. 图像预处理：使用MATLAB的图像处理工具对采集到的人脸图像进行预处理，例如灰度化、裁剪、缩放等操作。 3. 特征提取：利用MATLAB的人脸识别工具包，如Face Recognition Toolbox，对处理后的图像提取人脸特征，常用的方法包括主成分分析（PCA）和线性判别分析（LDA）等。 4. 训练模型：使用已提取的人脸特征数据集训练人脸识别模型，可以选择支持向量机（SVM）、卷积神经网络（CNN）等算法。 5. 考勤系统：在员工打卡时，将摄像头捕获的人脸图像输入到训练好的模型中进行识别，匹配员工信息并记录考勤数据。 6. 结果反馈：根据识别结果，可以自动生成考勤报表或者实时显示员工打卡情况。 以上只是一个简单的步骤，实际开发过程中需根据具体需求和系统规模进行定制和优化。MATLAB提供了丰富的图像处理和机器学习工具，是开发人脸识别考勤系统的一个很好选择。

Global site tag (gtag.js) - Google Analytics