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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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学习 变量使用总结
2011/03/24 PHP
php获取apk包信息的方法
2014/08/15 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python猜数字算法题详解
2020/03/01 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
酒店销售经理岗位职责
2014/01/31 职场文书
网上卖盒饭创业计划书范文
2014/02/07 职场文书
大学军训感言800字
2014/02/27 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
高三毕业评语
2014/12/31 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript