Vue双向数据绑定(MVVM)的原理


Posted in Javascript onOctober 03, 2020

MVVM

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。

Vue双向数据绑定(MVVM)的原理

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。

数据劫持

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

Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

Object.defineProperty(obj, prop, descriptor)

参数:

  • obj--要在其上定义属性的对象。

  • prop--要定义或修改的属性的名称。

  • descriptor--将被定义或修改的属性描述符。

返回值:被传递给函数的对象。

MVVM 的数据双向绑定步骤

1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者

2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数

3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图

4、MVVM入口函数,整合以上三者。

流程如下所示:

Vue双向数据绑定(MVVM)的原理

实现Observer

我们知道可以利用Obeject.defineProperty()来监听属性变动,那么将需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter。

这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。

实现Compile

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

Vue双向数据绑定(MVVM)的原理

实现Watcher

Watcher订阅者作为Observer和Compile之间通信的桥梁,主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。

实现MVVM

MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁。

达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

以上就是Vue双向数据绑定(MVVM)的原理的详细内容,更多关于Vue 双向数据绑定(MVVM)的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 #Javascript
js通过canvas生成图片缩略图
Oct 02 #Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 #Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 #Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 #Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 #Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 #Javascript
You might like
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
JS原型链怎么理解
2016/06/27 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
Vue实现日历小插件
2019/06/26 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
Python break语句详解
2014/03/11 Python
Python 内置函数complex详解
2016/10/23 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
国际贸易专业个人求职信格式
2014/02/02 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
小学教师寄语大全
2014/04/03 职场文书
《风筝》教学反思
2014/04/10 职场文书
邀请函样本
2015/02/02 职场文书