MVC

MVC是模型(model)-视图(view)-控制器(controller)的缩写。

Model: 模型（用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法）
View: 视图（渲染页面）
Controller: 控制器（M和V之间的连接器，用于控制应用程序的流程，及页面的业务逻辑），controller通常负责从view读取数据,控制用户输入,向model发送数据

View 传送指令到 Controller ；
Controller 完成业务逻辑后，要求 Model 改变状态；
Model 将新的数据发送到 View，用户得到反馈。

MVC思想：Controller负责将Model的数据用View显示出来。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>mvc</title>
</head>
<body>
    <div id="root"></div>
    <script src="mvc.js"></script>
</body>
</html>
// mvc.js
class View {
    constructor(controller) {
        this.controller = controller;
    }
    render(model) {
        const button = document.createElement('button');
        const isOpen = model.getState().isOpen;
        button.innerText = isOpen ? '关' : '开';
        button.onclick = this.controller.switch;

        const root = document.getElementById('root');
        root.innerHTML = '';
        root.appendChild(button);
        return button;
    }
};

class Model {
    state = {
        isOpen: false
    };
    _views = [];
    getState() {
        return this.state;
    }
    register(view) {
        this._views.push(view);
    }
    switch() {
        this._update({
            isOpen: !this.state.isOpen
        });
    }
    _update(data) {
        Object.assign(this.state, data);
        this._notify();
    }
    _notify() {
        this._views.forEach(view => view.render(this));
    }
};

class Controller {
    constructor() {
        this._view = new View(this);
        this._model = new Model();
        this._model.register(this._view);
        this._view.render(this._model);
    }
    switch = () => {
        this._model.switch();
        console.log('switch!!!');
    };
}

const controller = new Controller();

MVVM

Vue就是基于MVVM模式实现的一套渐进式（VUE不强求你一次性接受并使用它的全部功能特性）框架，在vue中：

Model:指的是js中的数据，如对象，数组等等；
View:指的是页面视图；
viewModel:指的是vue实例化对象

viewModel完成数据的双向绑定：

一是将Model转化成View，实现的方式是：数据绑定。
二是将View转化成Model，实现的方式是：DOM 事件监听。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>mvvm</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script src="mvvm.js"></script>
  </body>
</html>
// mvvm.js
var app = new Vue({
    el: '#root',
    template: `<button @click="onSwitch()">{{isOpen ? '关' : '开'}}</button>`,
    data: {
        isOpen: false
    },
    methods: {
        onSwitch() {
            this.isOpen = !this.isOpen;
        }
    }
});

区别

mvvm通过数据驱动视图层的显示而不是节点操作
mvc中的view和model是可以直接访问的,造成耦合度较高
mvvm真正将页面和数据逻辑分离,将数据绑定放到js实现,解决了mvc中大量的dom操作使得页面渲染速度将降低,加载速度慢

mvc是单通信的,必须通过Controller承上启下,mvc和mvvm的区别并不是vm完全取代了c,只是在mvc的基础上增加了vm层,弱化了c的地位,vm主要是抽离c中的业务逻辑,实现逻辑组件的重用使开发效率更高。

MVVM和MVC的区别详解

MVC

MVVM

区别