MVVM
Model
数据模型,普通的JS数据对象
View
前端展示页面,这里是DOM标签
ViewModel
用于双向绑定数据与页面,也是Vue的实例
MVVM 强调的是双向数据绑定,页面输入会导致模型数据改变,模型数据的改变也会影响页面数据展示与渲染
其核心就是 ViewModel 通过 DOM 监听实现。
在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel(桥梁)进行交互,Model 和 ViewModel之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
Model与ViewModel之间的双向关系:
- Model通过Ajax通信,发送数据给ViewModel。
- ViewModel也可以通过Ajax通信,发送请求给Model。
ViewModel与View之间的双向关系:
- ViewModel中的数据改变,可以同时改变View上的显示内容。
- View上的内容改变(比如输入框中的内容),也可以同时改变ViewModel中对应的数据。
双向: 指ViewModel中的data部分和View之间的双向关系。
- 正向:数据驱动页面
- 反向:页面更新数据
MVVM与MVC的区别
MVC
- Model(模型):负责从数据库中取数据
- View(视图):负责展示数据的地方
- Controller(控制器):用户交互的地方,例如点击事件等等
- 思想:Controller将Model的数据展示在View上
MVVM
- 强调的是双向数据绑定:
- 页面输入会导致模型数据改变
- 模型数据的改变也会影响页面数据展示与渲染
vue是mvvm框架吗?
Vue是MVVM框架,但是不是严格符合MVVM,因为MVVM规定Model和View不能直接通信,而Vue的ref可以做到这点
参考官方文档: