目录

MVVM和MVC有什么区别

MVC和MVVM都是前端开发中常用的设计模式,都是为了解决前端开发中的复杂性而设计的,不过它们之间的实现方式和理念却有很大的不同。MVC(Model-View-Controller)模式是一种将应用程序分成三个核心部分的方法:模型,视图和控制器。

一、MVVM和MVC的区别

MVC和MVVM都是前端开发中常用的设计模式,都是为了解决前端开发中的复杂性而设计的,不过它们之间的实现方式和理念却有很大的不同。

MVC(Model-View-Controller)模式是一种将应用程序分成三个核心部分的方法:模型,视图和控制器。MVC模式的基本思想是将应用程序的逻辑、数据和表示分开。其中,模型是处理应用程序数据逻辑的部分,视图是应用程序的用户界面,控制器是处理用户输入并在视图和模型之间协调数据流的部分。

而MVVM(Model-View-ViewModel)模式则是一种基于MVC模式的新模式,它的核心思想是将View的状态和行为抽象化,让我们将视图UI和业务逻辑分离。MVVM模式的三个核心部分:模型(Model)、视图(View)和视图模型(ViewModel)。模型和视图与MVC模式中的模型和视图相同,但是视图模型是一个中介,它连接视图和模型,并负责将模型数据转换为视图可以使用的数据。通过数据绑定机制,视图模型可以监听模型中数据的变化,并及时地将其更新到视图中。

MVC和MVVM的主要区别在于视图和模型之间的关系。在MVC模式中,视图与模型是通过控制器进行交互的,而在MVVM模式中,视图与视图模型之间是通过双向数据绑定进行交互的。在MVVM模式中,视图模型扮演了控制器的角色,它将视图与模型之间的交互简化为视图与视图模型之间的交互,使得前端开发更加容易。同时,MVVM模式的双向数据绑定机制,可以让数据和视图之间更加灵活和高效地进行交互。

延伸阅读:

二、MVVM响应式原理

vue是采用数据劫持配合发布者-订阅者的模式的方式,

  • 通过Object.defineProperty()来劫持各个属性的getter和setter,
  • 在数据变动时,发布消息给依赖收集器(dep中的subs),去通知(notify)观察者,做出对应的回调函数,更新视图
  • MVVM作为绑定的入口,整合Observer,Compile和Watcher三者,
    • 通过Observer来监听model数据变化,
    • 通过Compile来解析编译模板指令,
    • 最终利用Watcher搭起Observer,Compile之间的通信桥路,
    • 达到数据变化Observer)=>视图更新;视图交互变化=>数据model变更的双向绑定效果。