MVVM 和 MVC的原理及区别

一、什么是MVVM和MVC?

MVVM(Model-View-ViewModel):

  • M:Movel(数据模型)
  • V:View
  • VM:ViewModel 是一个同步View 和 Model的对象。
  • 数据模型数据双向绑定的思想作为核心,因此在View和Model之间没有联系,通过ViewModel进行交互,而且Model和ViewModel之间的交互是双向的,因此视图的数据的变化会同时修改数据源,而数据源数据的变化也会立即反应到View上。

MVC(Model-View-Controller):

  • M:Model(数据模型),用于存放数据
  • V:View(视图),也就是用户界面
  • C:Controller是Model和View的协调者,Controller把Model中的数据拿过来给View使用。
  • MVC是比较直观的架构模式,用户操作->View(负责接收用户的输入操作)->Controller(业务逻辑处理)->Model(数据持久化)->View(将结果反馈给View)

二、MVC原理

在这里插入图片描述Controller负责将Model的数据用View显示出来
用户操作> View (负责接受用户的输入操作)>Controller(业务逻辑处理)>Model(数据持久化)>View(将结果通过View反馈给用户)

缺点:

  1. 所有业务逻辑都在Controller里操作,逻辑复杂且不利于维护,
  2. 大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。
  3. 当 Model 频繁发生变化,需要主动更新到View ;当用户的操作导致Model发生变化,同样需要将变化的数据同步到Model中, 这样的工作不仅繁琐,而且很难维护复杂多变的数据状态。

由于MVC模式的缺陷,MVC的变种模式衍生出MVVM模式


三、MVVM原理

在这里插入图片描述VM双向绑定:在 MVVM 框架中,View(视图) 和 Model(数据) 是不可以直接通讯的,在它们之间存在着 ViewModel 这个中间介充当着观察者的角色。
当用户操作 View(视图),ViewModel 感知到变化,然后通知 Model 发生相应改变;
反之当 Model(数据) 发生改变,ViewModel 也能感知到变化,使 View 作出相应更新。这个一来一回的过程就是我们所熟知的双向绑定。

猜你喜欢

转载自blog.csdn.net/isfor_you/article/details/114374044
今日推荐