vue响应式原理（数据双向绑定的原理） (vue 图解10)

MVC模式

MVC的全称是Model-View-Controller，模型-视图-控制器，整个结构分成三层：
1. 最上面一层，视图层（View）：用户界面（UI）
2. 最底层，是核心的“数据层”：保存数据
3. 中间层，控制层（Controller）：处理业务逻辑，负责根据用户从“视图层”输入的指令，选取“数据层”的数据，然后对其进行相应的操作，产生最终的结果

各部分的通信方式如下：
- View传送指令到Controller
- Controller完成业务逻辑后，要求Model改变状态
- Model将新的数据发送到View,用户得到反馈

所有通信都是单向的。

MVP

MVP模式将Controller更名为Presenter，同时改变了通信方向
1. 各部分的通信都是双向的
2. View与Model不发生联系，都通过Presenter传递；（View和Model之间不能直接进行交互，必须通过Presenter来交流数据；）
3. View不部署任何业务逻辑，成为“被动视图”，而所有业务逻辑都部署在 Presenter

MVP与其说是设计模式，还不如说是一种程序架构范式，说明了我们应该怎样更好的组织整个项目的代码和资源。

M：Model层，数据服务层，负责数据的增删改查。在服务端就包括mysql数据库操作、本地cache等；在客户端就包括调用服务器API、各种形式的数据缓存等。有些朋友将Model层理解为数据模型层，数据模型归根结底是数据，设计数据模型是为了在面向对象的程序设计中更好的表达数据。所以数据模型贯穿于整个应用程序，不应该将Model层单单理解为是数据模型。但Model层往往负责将接收到的数据转化为相应的数据模型供上层使用。

V：View层，视图界面层，负责UI的渲染、子视图的组织、UI事件、用户交互等。在有些网友看来，View层是比较轻的一层，大多数时候只需要调用系统的UI控件，绑定需要的UI事件就完事了，很多平台甚至拖拖控件就行。但是实际上是因为平台为我们做了大多数的事，我们不需要去考虑怎么有效的渲染界面，也不需要去考虑怎样去实现各种各样的交互事件(触摸)，只需要关注应用本身就可以了。

P：Presenter层，有得朋友将其叫作发布者，百度翻译为主持人，笔者觉得后者更贴切些。 Presenter既是中间人，在View和Model之间起到桥梁的作用，又是一个独立的大模块，封装了业务的复杂度，将UI和业务逻辑拆分开来，使UI和业务都可以独立的进行变化。从整体的数据流向上看，Presenter从Model层获取数据，并通过接口发送给View层展示；View层将用户交互传递给Presenter，由Presenter完成相应的业务逻辑，这其中可能会有Model层的参与，比如Presenter调用Model层的接口来保存数据。

参考链接

View与Presenterd 交互更为频繁。。

MVVM模式

MVVM模式将Presenter更名为ViewModel（对应MVC中的C-controller），基本上与MVP模式一致。唯一区别MVVM采用双向数据绑定，View的变动自动反应在ViewModel上。
- M（model）：模型—javascript object,代表真实情况的内容（一个面向对象的方法）、或表示内容（以数据为中心的方法）的数据访问层
- V（view）：视图—用户界面（UI）
- Viewmodel：在vue中指vue实例对象，是一个公开公共属性和命令的抽象的view；是一个转值器，负责转换Model中的数据对象，来让对象变得更容易管理和使用。

View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作。

数据双向绑定：

所谓的双向绑定，就是view的变化能反映到ViewModel上，ViewModel的变化能同步到view上

vue的定义：

 1. vue是一套用于构建用户界面的渐进式框架
 2. vue是一款基于MVVM方式的轻量级的框架
 3. vue是一款基于数据驱动、组件化思想的框架
 4. vue被设计为可以自底向上、逐层应用的框架
 5. vue的核心库只关注视图层，易于上手，还便于与第三方库或既有项目整合
 6. 当与现代化的工具链以及各种支持类库结合使用时，vue也完全能够为复杂的单页应用提供驱动

参考链接，很是不错的整理！！！