锐客网

  1. 首页 > 睿知 > it技术 > >

vue|浅析Vue三种开发模式（MVC、MVP、MVVM）

vue前端

首先明确一点： 开发模式≠设计模式
开发模式：一个开发项目的方式或标准，RMVC
比较常见的三种开发模式：MVC、MVP、MVVM
1、MVC （个人感觉重点在View） MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑（C）、数据（M）、界面显示（V）分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。
vue|浅析Vue三种开发模式（MVC、MVP、MVVM）
文章图片


  1. 用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
  2. 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
  3. Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。vue|浅析Vue三种开发模式（MVC、MVP、MVVM）
    文章图片

2、MVP （个人感觉重点在 Presenter，翻译为主持人） MVP是Model-View-Presenter简称，MVP是从经典的模式MVC演变而来，它们的基本思想有相通的地方Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示：
vue|浅析Vue三种开发模式（MVC、MVP、MVVM）
文章图片


  1. 各部分之间的通信，都是双向的。
  2. View 与 Model 不发生联系，都通过 Presenter 传递。可以将一个Presenter用于多个视图，而不需要改变Presenter的逻辑。这个特性非常的有用，因为视图的变化总是比模型的变化频繁。
  3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。vue|浅析Vue三种开发模式（MVC、MVP、MVVM）
    文章图片

3、MVVM（个人感觉重点在VM，viewModel）
  • M：（model）普通的javascript数据对象（其实就是一个对象，对象里放了数据）
  • V：（view）前端展示页面
  • VM：（ViewModel）用于双向绑定数据与页面，对于我们的课程来说，就是vue的实例
MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。这种模式下，页面输入改变数据，数据改变影响页面数据展示与渲染
vue|浅析Vue三种开发模式（MVC、MVP、MVVM）
文章图片


vue|浅析Vue三种开发模式（MVC、MVP、MVVM）
文章图片


【vue|浅析Vue三种开发模式（MVC、MVP、MVVM）】

    推荐阅读


    上一篇：OC|iOS 设计模式 浅析MVC、MVP、MVVM

    下一篇：渐变