MVVM设计思想

MVVM设计思想

1. M（model）
2. V（view）
3. VM（View-Model）
   MVVM是Vue框架非常核心的设计思想，最重要的理念其实就是分而治之，就是把不同的功能代码放到不同的模块里边，然后通过特定的方式让它们之间建立起关联。从字面上理解MVVM，M指的是model数据模型就是vue实例中data里的数据；接下来的V就是view视图，说白了就是所写的模版，本质上来说就是DOM元素；最后的两个字母VM就是上面两者的结合View-Model，它所扮演的角色就是一些控制逻辑。model模型是提供数据的，view视图是提供页面展示效果的，VM是实现控制逻辑把两者结合在一起。
   
   左边的view视图就是模版本质上就是DOM，Model就是所谓的数据，data中的数据，这的说法叫做Plain JavaScript Objects 普通的js对象说白了就是一个{{}}花括号里面可以放各式各样的数据。但是View和Model之间不可以直接交互，必须得通过VM（View-model）实际上就扮演了一个中介的角色，把V和M联系到一起。所以说View和Model想要联系必须通过View-Model这个中介。

View-Model是通过哪种方式建立关联的呢？当用户在表单输入域当中去输入内容的时候，它是怎么影响到模型中数据变化的呢？实际上是用到了上图中向右的箭头DOM Listeners(DOM监听)实际上就是事件监听。但是在v-model指令用法中（<input type = "text" v-model = "uname" />）又没有看到事件监听。实际上是因为用到了v-mode这个指令，其实这个指令的底层用到了事件，只不过字面上看不到，是 v-model底层实现事件监听。
所以说从视图View->Model用的是DOM Listeners(DOM监听)事件监听的方式做的。
从Model -> View 从模型到视图又是怎么做到之间的交互呢，我们用到的是Data Bingdings 数据绑定。数据绑定具体用到那些语法规则呢？v-cloak、v-once、v-html、v-model包括插值表达式在内所做的工作都是Data Bindings数据绑定，就是把数据填充到视图层，这是两个方向实现的细节。

MVVM设计思想的理念就是分而治之，把不同的业务代码放到不同的模块当中，然后通过特定的逻辑把他们组织到一块。最核心的就是双向绑定的方式 我们要清楚，从视图到模型用的是事件监听DOM Listeners，从模型到视图用的是数据绑定 Data Bindings。