MVVM
是 Model-View-ViewModel
的缩写。
Model
代表数据模型,也可以在Model
中定义数据来修改和操作的业务逻辑。
View
代表UI
组件,它负责将数据模型转化成UI展现出来。
View-ViewModel
监听数据模型的改变和控制视图行为、处理用户交互,简单理解就是一个同步View
和Model
的对象,连接Model
和View
。
viewmodel
和model
实现双向数据绑定。
为什么需要MVVM
:
前端开发中暴露了三个痛点问题:
1、开发中在代码中大量调用相同的DOM API
,处理繁琐,操作冗杂,使得代码难以维护。
2、大量的DOM
操作使页面渲染性能降低,加载速度变慢,影响用户体验。
3、当Model频繁发生变化,开发中需要主动更新View
,当用户的操作导致Model
发生变化,开发者
同样需要将变化的数据同步到Model
中,这样的工作不仅繁琐,而且很难维护复杂多变的数据状态。
MVVM
优点:
在MVVM
架构下,View
和Model
之间没有直接的联系,而是通过ViewModel
进行交互,Model
和ViewModel
之间的交互是双向的,因此View
的数据的变化会同步到Model
中,而Modell
数据的变化也会立即反应到View上。
ViewModel
通过双向数据绑定把View
和Model
连接起来。
而View和Model之间的同步工作完全是自动的,无需人为干涉。
因此开发着只需关注业务逻辑,不需要手动操作DOM
。
不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM
来统一管理。