MVVM

MVVM 框架

• MVVM（Model-View-ViewModel）是对 MVC（Model-View-Control）和 MVP（Model-View-Presenter）的进一步改进。

View：视图层（UI 用户界面）
ViewModel：业务逻辑层（一切 js 可视为业务逻辑）
Model：数据层（存储数据及对数据的处理如增删改查）

• MVVM 将数据双向绑定（data-binding）作为核心思想，View 和 Model 之间没有联系，它们通过 ViewModel 这个桥梁进行交互。
• Model 和 ViewModel 之间的交互是双向的，因此 View 的变化会自动同步到 Model，而 Model 的变化也会立即反映到 View 上显示。
• 当用户操作 View，ViewModel 感知到变化，然后通知 Model 发生相应改变；反之当 Model 发生改变，ViewModel 也能感知到变化，使 View 作出相应更新。

旧的网页组成：3部分

HTML：提供网页的内容
CSS：为内容提供样式
JS：为内容提供行为/数据
问题: HTML和CSS功能太弱，不包含程序必要的要素(变量，分支，循环)，生活不能自理。所有改变都需要js来实现。代码繁琐，重复代码量大。

重新划分

View：界面，指网页中的元素和样式，一般指HTML+CSS
但是，HTML是增强版的HTML，支持变量，js表达式，分支和循环等程序要素。无需编写js，就可以在html上执行部分程序的操作。所以，可简化js程序的编写,避免大量重复编码

Model：模型，指程序中创建的或从服务端获取的数据，一般用JS中的一个对象来保存。数据内容会显示到界面View中。
页面中有几处变化, 需要几个变量,模型对象中就要对应着定义几个变量来支持页面

ViewModel：视图模型，替代之前手写的DOM/JQUERY操作，把模型中的数据和界面中的HTML元素“绑定”在一起:
什么是绑定: 不需要写一行代码，就可让页面元素内容和js程序中的数据联动变化
new Vue()创建的就是这样一种强大的ViewModel对象，可自动同步数据和页面元素

ViewModel绑定原理：

1. 响应系统(Reactivity System):
2. 虚拟DOM (Virtaul DOM):

MVVM的定义

M：Model（服务器上的业务逻辑操作）
V：View（页面）
VM：ViewModel（Model与View之间核心枢纽，比如Vue.js）

Model与ViewModel之间的双向关系
Model通过Ajax通信，发送数据给ViewModel。
ViewModel也可以通过Ajax通信，发送请求给Model。

ViewModel与View之间的双向关系
ViewModel中的数据改变，可以同时改变View上的显示内容。
View上的内容改变(比如输入框中的内容)，也可以同时改变ViewModel中对应的数据。

双向绑定是指ViewModel中的data部分和View之间的双向关系。
-- 正向：数据驱动页面
-- 反向：页面更新数据

绑定是指自动化处理，data改变了view随之改变，反之也是。
不用像传统方式那样，通过onChange事件获取用户输入，然后再通过改变innerHtml修改显示。

双向绑定都是依赖ES5中一个重要的API，Object.defineProperty。

正向

Object.defineProperty的作用是监听data的变化，再监听到变化之后会触发一个回调函数。所以，我们要在Object.defineProperty的回调函数中写明data与View的关联就可以了，后续中data有变化就会自动根据你写的关联处理修改View的显示内容。

反向

当用户在View中输入内容时，使用input事件(比如onChange)，修改data的值。有些框架已经为我们自动做了这个事情，不需要我们再关心。比如，在Vue框架中，可以使用V-Model方便的关联view和data。

---

简述MVVM

• MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。
• 在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。
• ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

简述 Vue.js 的优点

• 低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 "View" 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
• 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
• 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
• 方便测试。界面素来是比较难于测试的，开发中大部分 Bug 来至于逻辑处理，由于 ViewModel 分离了许多逻辑，可以对 ViewModel 构造单元测试。
• 易用 灵活 高效。