什么是MVVM，对Vue中MVVM模型的简单介绍

什么是MVVM模型

MVVM（全称：Model ViewModel View）由M-V-VM三部分组成。

MVVM采用双向数据绑定，view中的数据发生变化将自动反应到ViewModel上；反之，Model中的数据发生变化也会自动展现在页面上。

ViewModel将Model和View关联起来，ViewModel不仅负责把Model的数据同步到View中显示出来，还负责把View中数据的修改同步回Model。

MVVM模型的核心思想：时刻关注Model的数据变化，让MVVM框架利用自身机制自动更新DOM，即实现数据-视图分离，数据不会影响视图。

MVVM模型优缺点

 1、优点
① Controller简洁清晰
 ViewModel分离出来大部分的Controller代码，更加清晰和容易维护。

② 方便测试
大部分Bug来自于逻辑处理，由于ViewModel把逻辑分离出来，可对ViewModel构造单元测试。

③ 开发解耦
1）一位开发者负责逻辑实现，另一位开发者负责UI实现

2）敏捷开发中，并非等后端借口提供后再开发，提供前可完成Controller和View的开发工作。

2、缺点
1、代码量比MVC多。

2、需对每个Controller实现绑定，这是分离不可避免的工作量。

Vue中MVVM模型

Vue中MVVM代表含义

M：模型（model），对应的是data中的数据

V：视图（view），模板

VM：视图模型（viewModel），Vue实例对象

图中向左的箭头表示：Model中的data数据通过Vue实例对象的绑定，展示在页面中

图中向右的箭头表示：页面中的数据发生变化，通过Vue实力对象的监听，映射到Model中的data数据变化

注意：

1、data中所有的属性，最后都会出现在vm身上

2、vm身上所有的属性以及Vue原型上的所有属性，在Vue模板中都可以直接使用。