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 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
jquery实现手风琴效果
Nov 20 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
vue mounted组件的使用
Jun 18 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
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多文件上传实例
2015/07/09 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
python中map的基本用法示例
2018/09/10 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
汽车队司机先进事迹材料
2014/02/01 职场文书
北京奥运会口号
2014/06/21 职场文书
金融保险专业求职信
2014/09/03 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
运动会广播稿200字
2014/10/18 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
2015入党自荐书范文
2015/03/05 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
redis 解决库存并发问题实现数量控制
2022/04/08 Redis