前端框架系列之（mvp）

简介

前面我们介绍过了mvc 前端框架系列之（mvc），最后其实view跟controller的耦合度还是没有完全分离，所以会导致一大堆逻辑还是在view视图层了，所以为了解决这个问题，就把controller换成了presenter。

• Model（模型）表示应用程序核心（比如数据库记录列表）。
• View（视图）显示数据（数据库记录）。
• Presenter（代理）负责逻辑的处理

我们再看一下mvc的设计图：

再看一下mvp的设计图：

MVP跟MVC很相像，我们把MVP当成MVC来看也不为过，presenter就像一个经纪人一样，view的什么事情只需要跟经纪人说就可以了（任何事！！）

业务需求

1. 接收用户输入的“用户名”和“密码”做登录操作
2. 登录成功后返回“登录成功提示”

项目搭建

通过上一篇的mvc的解析，再到mvp就太简单了，我们直接用上一节的demo

https://github.com/913453448/vue-property-decorator-demo

我们copy一个mvc目录为mvp：

同样，我们修改一下main.ts的入口为mvp/index.vue

main.ts:

import Vue from "vue";
import Demo from "./mvp/index.vue";
new Vue({
    render(h){
        return h(Demo);
    }
}).$mount("#app");