一、什么是MVVM

MVVM模式是Model-View-ViewMode模式的简称。由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成，结构如下图。通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点：

1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。
4. 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

• 视图、视图模型、模型的分工

1. 视图（View）

视图负责界面和显示。它通过ms-controller等指令和ViewModel进行数据绑定，不直接与Model交互。当Model发生变化时，View也就跟着同步变化。但是对于非监听属性，数据不会同步到View中。

2. 视图模型（ViewModel）

vm，亦即view model，视图模型，负责界面逻辑和模型数据封装。只要我将一个JS对象添加一个$id属性， 再放到avalon.define方法里面，就能得到一个vm。通过指令绑定就可以实现与View的交互。

3. 模型（Model）

Model与MVC模式一样，Model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。它具有对数据直接访问的权利，例如对数据库的访问，Model不依赖于View和ViewModel，也就是说，模型不关心会被如何显示或是如何被操作，模型也不能包含任何用户使用的与界面相关的逻辑。