什么是MVVM模型
MVVM(全称:Model ViewModel View)由M-V-VM三部分组成。
MVVM采用双向数据绑定,view中的数据发生变化将自动反应到ViewModel上;反之,Model中的数据发生变化也会自动展现在页面上。
ViewModel将Model和View关联起来,ViewModel不仅负责把Model的数据同步到View中显示出来,还负责把View中数据的修改同步回Model。
MVVM模型的核心思想:时刻关注Model的数据变化,让MVVM框架利用自身机制自动更新DOM,即实现数据-视图分离,数据不会影响视图。
MVVM模型优缺点
1、优点
① Controller简洁清晰
ViewModel分离出来大部分的Controller代码,更加清晰和容易维护。
② 方便测试
大部分Bug来自于逻辑处理,由于ViewModel把逻辑分离出来,可对ViewModel构造单元测试。
③ 开发解耦
1)一位开发者负责逻辑实现,另一位开发者负责UI实现
2)敏捷开发中,并非等后端借口提供后再开发,提供前可完成Controller和View的开发工作。
2、缺点
1、代码量比MVC多。
2、需对每个Controller实现绑定,这是分离不可避免的工作量。
Vue中MVVM模型
Vue中MVVM代表含义
M:模型(model),对应的是data中的数据
V:视图(view),模板
VM:视图模型(viewModel),Vue实例对象
图中向左的箭头表示:Model中的data数据通过Vue实例对象的绑定,展示在页面中
图中向右的箭头表示:页面中的数据发生变化,通过Vue实力对象的监听,映射到Model中的data数据变化
注意:
1、data中所有的属性,最后都会出现在vm身上
2、vm身上所有的属性以及Vue原型上的所有属性,在Vue模板中都可以直接使用。