MVVM定义🏳️🏳️
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。
【模型】指的是后端传递的数据。
【视图】指的是所看到的页面。
【视图模型】mvvm模式的核心，它是连接view和model的桥梁。
它有两个方向:一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定 。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听 。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。MVVM流程图如下：
MVVM框架-VUE介绍🎌🎌:
🏹MVVM还有一种模式model-view-binder，主要用来简化用户界面的事件驱动程序设计
MVVM可以分成四部分并且这四部分和VUE有对应关系:
| 模型(Model)：是指代表真实状态内容的领域模型(面向对象)，或指代表内容的数据访问层(以数据为中心) | 模型(Model)：Vue的实例中的那些属性 data,methods, computed 等等 |
| 视图(View)：是用户在屏幕上看到的结构、布局和外观(UI) | 视图(View)：对应真实的html和css |
| 视图模型(VM)：暴露公共属性和命令的视图抽象。让视图和数据二者进行通信，靠的绑定器 | 视图模型(VM)：对应Vue的模板语法 |
| 绑定器(binder)：声明性数据和命令绑定 | 绑定器：对应v-bind, v-model ,@click, :prop等绑定数据语法 |
🏹在一个.vue文件中，我们会看到3部分<template /><script /> <style />
<template />负责视图模型和绑定器<style />负责视图的CSS<script />中定义的Vue实例负责模型的数据管理和绑定器的逻辑
🏹ViewModel-View阶段
视图模型转化为视图，也即Vue中的模板语法转化为实际的HTML和CSS，这个部分主要由Vue自动实现，我们开发者主要处理的是Model-ViewModel阶段。
Model-ViewModel阶段
这个阶段就是我们实例化Vue对象，添加data,methods等操作，以及将数据绑定到模板上。
Model:定义data函数管理数据count,以及定义method中add函数控制count数据的变更
ViewModel:是抽象语法，主要是Vue的模板语法，绑定数据，之后Vue会将其转化为真实的HTML
由于，ViewModel和Model主要是绑定关系，也即是数据和视图是绑定的，你什么样的数据就决定了什么样的视图，所以我们一般也把Vue称为数据驱动框架。
所以很多时候，只要知道数据和ViewModel的关系，也就知道UI的样子了，这个时候，我们只需操作数据的结构，也就操作了视图。
MVVM优点与缺点🎌🎌:
优点：
- 双向绑定时，当Model变化时，View-Model会自动更新，View也会自动变化。
- View的功能进一步的强化，具有控制的部分功能。
- 控制器的功能大部分移动到View上处理，大大的对控制器进行了瘦身。
缺点：
- 数据绑定使得 Bug 很难被调试。
- 数据双向绑定不利于代码重用。
- 大的模块，model很大，不利于内存的释放。
MVP定义🏳️🏳️：
JQuery-MVP设计模式🎌🎌:
- M(model):模型层(数据层)(弱)
- V(view):视图层，页面上的DOM展示
- P(presenter):控制器(最核心的一层)，视图和模型层的中转站，大量代码做DOM的操作，模型层非常弱。视图发生改变点击提交时控制器会去执行，控制器里负责了所有的业务逻辑，控制器可以去调模型层去发Ajax请求，控制器通过DOM操作再改变视图层。
- 在大型项目中，JQuery编写的百分之七八十以上的代码都在操作DOM。JQuery是面向DOM在做开发。
MVP优点与缺点🎌🎌:
优点：
- 降低耦合
- 模块职责划分明显
- 利于测试驱动开发
- 代码复用
- 隐藏数据
- 代码灵活性
缺点：
视图的渲染放在Presenter中，所以视图和Presenter的交互会过于频繁。如果Presenter过多地渲染视图，往往会使得它与特定的视图的联系过于紧密。