MVVM框架模式详解
MVVM 定义
MVVM 是 Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对 View 和 ViewModel 的双向数据绑定,这使得 ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。
在 MVVM 的框架下视图和模型是不能直接通信的。它们通过 ViewModel 来通信,ViewModel 通常要实现一个 observer 观察者,当数据发生变化,ViewModel 能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel 也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且 MVVM 中的 View 和 ViewModel 可以互相通信。
#MVVM 流程图:
#MVVM 的特点
#1. 低耦合性。
View 可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的 View 上,当 View 变化的时候 Model 不可以不变,当 Model 变化的时候 View 也可以不变。
#2. 可重用性。
把一些视图逻辑放在一个 ViewModel 里面,让很多 View 重用这段视图逻辑,也就是组件化思想。
#3. 独立开发。
开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
#MVVM 框架模式的好处
- 双向绑定技术,这是 MVVM 思想主打的思想,也是它的最优点
- View 的功能进一步的强化,具有控制的部分功能,若想无限增强它的功能,甚至控制器的全部功几乎都可以迁移到各个 View 上(不过这样不可取,那样 View 干了不属于它职责范围的事情)。View 可以像控制器一样具有自己的 View-Model.
- 由于控制器的功能大都移动到 View 上处理,大大的对控制器进行了瘦身。
- 可以对 View 或 ViewController 的数据处理部分抽象出来一个函数处理 model。
#MVVM 框架模式的不足
- 数据绑定使得 Bug 很难被调试。界面出现了异常,有可能是 View 的代码有问题,也可能是 Model。
- Model 长期持有,不释放内存,就造成了花费更多的内存
- 数据双向绑定不利于代码重用。客户端开发最常用的重用是 View,但是数据双向绑定技术,让你在一个 View 都绑定了一个 model,不同模块的 model 都不同。那就不能简单重用 View 了。
10 声望
1 粉丝
推荐阅读
内置对象string的方法
在js中,String和Array是同级的,都是js中的内置对象。因此String也像Array那样有很多操作的方法。注意:String对象的涵盖范围,它包含所有的字符串。1. 字符串对象的属性length(1) 表示字符串的长度。(就是这个...
王影阅读 902
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json
谭光志赞 34阅读 20.7k评论 9
vue UI框架比较
最好基于vue2.0PC端:因为用过的是饿了么UI,所以比较以饿了么UI为基础element UI 饿了么UI支持vue2.x80分优点:组件的API方法、属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观N3 N3支持vue2.x70分优点:...
chinawzc赞 22阅读 39.8k评论 17
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...
原谅我一生不羁放歌搞文艺赞 14阅读 20k评论 9
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!
熊的猫赞 17阅读 1.6k评论 2
嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用<keep-alive>缓存起来。但是如果将所有对话都缓存,未...
wuwhs赞 12阅读 2.6k
你可能需要的多文档页面交互方案
在日常工作中,面对不同的需求场景,你可能会遇到需要进行多文档页面间交互的实现,例如在 A 页面跳转到 B 页面进行某些操作后,A 页面需要针对该操作做出一定的反馈等等,这个看似简单的功能,却也需要根据不同...
熊的猫赞 8阅读 1.3k
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。