持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第13天,点击查看活动详情
关于前端开发而言,近年来最常听到的就是MVVM。本文也主要来讲解该模式是什么。并结合MVC,MVP对比看看。
MVC:(所有通信都是单向的)View 传送指令到 Controller,Controller 完成业务逻辑后,要求 Model 改变状态,Model 将新的数据发送到 View,用户得到反馈
MVP:各部分之间的通信,都是双向的。View 与 Model 不发生联系,都通过 Presenter 传递。
MVVM: 是Model-View-ViewModel的简写。 它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然
本文的重点就是MVVM模式,而这其中最重要的就是ViewModel,(Model of View),即视图的模型,封装的是视图的表示逻辑和数据,是对视图的抽象,包括视图的属性和命令,或视图的状态和行为。
MVVM最重要的一个特性就是数据绑定:
单向绑定:ViewModel与View绑定之后,ViewModel变化后,View会自动更新,但反之不然,即数据传递的方向是单向的。(ViewModel ——>View)
双向绑定:ViewModel与View绑定之后,如果View和ViewModel中有任何一方有变化后,另一方均会自动更新,形成双向绑定。(View<——>Model)
MVVM模式有以下几大优点:
1. 低耦合。
视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
2. 可重用性。
你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
3. 独立开发。
开发人员可以只专注于业务逻辑和数据的开发,而设计人员则可以专注于页面设计。
MVVM与MVC最大的区别就是:它实现了View和Model的自动同步,也就是当Model的属性改变时,我们不用再自己手动操作Dom元素,来改变View的显示,而是改变属性后该属性对应View层显示会自动改变