1-3MVC MVVM MVP和1-4(组件化概念)

1-3：MVVM MVP 都是有MVC延伸而来的，都是之前比较老的框架，使用的是MVC.

MVP 是Jquery 框架的思想    MVVM 是Vue 思想 上图解释。

一：MVC

（1）View 传送指令到 Controller

（2）Controller 完成业务逻辑后，要求 Model 改变状态

（3）Model 将新的数据发送到 View，用户得到反馈。所有通信都是单向的。

二：MVP

（1）各部分之间的通信，都是双向的。

（2）View 与 Model 不发生联系，都通过 Presenter 传递。

（3）View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

Model 数据层（Ajax获取远程的数据）

Presenter  呈现层（业务逻辑相关的控制层） 控制器

View  视图层（DOM 展示）  视图

应用场景：当我试图点击提交的时候，改变。视图被操作的时候，控制器会处理（负责所有的业务逻辑），可以操作模型层，发送Ajax请求。控制器通过DOM来改变视图

视图层发送一个事件，交给控制器，控制器要么操作Ajax获取数据，要么直接操作DOM，控制器里面有业务逻辑，决定怎么修改页面的视图层，控制器是数据层和视图层的中转站。  大部分都是在操作DOM

 

三：MVVM：（Vue）

 Model 有数据层

 View  有视图层  负责显示数据

ViewModel(Vue 自带的) 层 取代Presenter

 编码的时候，不需要关注ViewModel(因为这是内置的)

数据变化 页面跟着变化  VM 层来做的 Vue 就是VM 它可以监听数据改变了，触发视图层的改变，它也可以从监听视图层的事件，改变数据。

 Model 有数据层

View  有视图层  负责显示数据

ViewModel(Vue 自带的) 层 取代Presenter

编码的时候，不需要关注ViewModel(因为这是内置的)

数据变化 页面跟着变化  VM 层来做的 Vue 就是VM 它可以监听数据改变了，触发视图层的改变，它也可以监听视图层的事件，改变数据。

 // 面向数据编程

Object.defineProperty

虚拟DOM的机制

实现VM 架构体系

View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 

四：组件化概念：

可以抽象的理解为，它们都是页面中的一部分，页面可以由拼积木组成的。