了解一下MVVM

276 阅读2分钟

MVC模式和MVVM的区别,算是很常见的面试题,MVC适合后端框架,对于前端确实不是很合适,于是出现了现在最流行的MVVM模式,其实本质上是MVC的改进版。

MVC到MVVM中间,还有一个模式是MVP,跟MVC几乎一样,唯一的不同就是MVC更新视图的操作是在Model中,而MVP中的Presenter作为中间层,除了基本业务之外,还要有view到model和model更新view的操作。presenter更加复杂了。所以现在MVC的数据流比较倾向于下面这种:

而MVP则是这样的:

对于MVVM,本身的思路跟MVC和MVP有很大一部分是相同的,MVVM改进了controller和presenter,并不是说没有了controller和presenter,而是用viewmodel替代了。在MVP和MVC中,数据渲染视图都是通过操作DOM实现,是手动的。MVVM则是实现了自动化同步。

MVC和MVP中的model要有相关数据和处理数据的逻辑方法,MVVM中的model仅仅是数据,并没有其他操作,就是vue中的data。

MVVM的view不是传统的视图,而是通过模板语法将数据渲染到页面,也就是虚拟DOM的概念。

MVVM中的viewmodel是核心,业务逻辑都在这里面实现,通过数据绑定,当model数据发生变化,viewmodel能监听到,viewmodel改变,也能更新model。由于view其实就是虚拟dom的渲染,也就能更新视图。

不同框架,实现双向数据绑定有一些不同,有数据劫持、发布订阅模式、赃值检查等。最熟悉的vue就是通过数据劫持和发布订阅方式实现的。在vue中,Model就是data里面的数据,view就是template里面的标签,viewmodel就是vue实例new Vue()。通过defineProperty劫持数据,然后发生改变的时候通知订阅者,触发相应的方法。

本人觉得不管是MVC、MVP还是MVVM,有一个核心是不变的,就是M和V是分开的,不同的就是怎么连接这两个,而MVVM确实会更加适合前端,把逻辑和视图分离的更加清晰。