Vue - MVVM模式及优点
2024-09-06 17:53:39
MVVM模式
视图层和数据层的双向绑定,让我们无需再去关心DOM操作的事情,更多的精力放在数据和业务逻辑上去
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。
- Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;
- View 代表UI 组件,它负责将数据模型转化成UI 展现出来,
- ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的,因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
Vue.js优点 - 面向数据编程
- 低耦合。 视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
- 可重用性。 你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
- 独立开发。 开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
- 可测试。 界面素来是比较难于测试的,而现在测试可以针对ViewModel来写易用灵活高效
最新文章
- java格式化时间格式
- [资源]PHP使用消息队列
- Matplotlib中文设置
- 应用服务器上部署自己的 blog 和 wiki 组件。
- StructureMap 学习笔记(1)
- react ie10下报错
- android用ImageView显示网络图片
- Android基本功:Handler消息传送机制
- FusionCharts参数说明-----3D饼图属性(Pie3D.swf )
- Yii2 自定义Gii生成代码模板
- C# List<;T>;的详细用法
- Silverlight第三方控件专题
- jQuery: $.extend()用法总结
- Git常用命令使用大全
- C语言之概述
- Java使用J4L识别验证码
- npm run dev--The &#39;mode&#39; option has not been set, webpack will fallback to &#39;production&#39; for this value
- python入门(三):循环
- 【30集iCore3_ADP出厂源代码(ARM部分)讲解视频】30-9底层驱动之USART
- ajax 怎么重新加载页面
热门文章
- keeplived高可用集群
- [翻译自官方]什么是RDB和AOF? 一文了解Redis持久化!
- 通过Apache Hudi和Alluxio建设高性能数据湖
- Python模块是否支持自定义属性使用双下划线开头和结尾?
- 第6章 Python中的动态可执行方法目录
- PyQt(Python+Qt)学习随笔:QTreeWidgetItem项下的子项列表中增加子项的方法
- jenkins+git部署环境,出现Failed to connect to repository : Command ";git ls-remote -h http://gitlab.xxxxx.git HEAD"; returned status code 128stdout: stderr: fatal: repository &#39;http://gitlab.xxxxx.git&#39; not fou
- 团队作业5_测试与发布(Alpha版本)
- Nginx 转发时的一个坑,运维居然让我背锅!!
- 理解js浅拷贝和深拷贝