Vue中的MVVM模型

MVVM模型学习

一、什么是MVVM模型？

Vue的设计受到了MVVM模型的启发，在文档中使用vm(view model)来表示vue的实例，那么，问题来了什么是MVVM模型呢？

MVVM从字面意思来理解就是划分为 View 、model 、 VIewModel 三个部分，分别表达了View(视图)、Model(数据)、ViewModel(负责两者之间的数据处理操作)。这就类似于Mvc框架中的Model层、View层、congtroller层，MVVM的本质就是MVC的升级版，更好的应用于前端开发。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

二、MVVM模型图解

View：也就是视图，字面意思就是直观的讲就是讲页面呈现给数据
Model：相当于数据层，数据就是即将在view层展示的。
ModelView：类似于中间件的用法，主要用于Model和View之间的桥梁，通过数据的双向绑定即可将两者之间的联系起来，并且保证数据视图的一致性。

值得一提的是在MVVM模型中，Model层和View层两者之间是不能直接进行联系，必须通过ViewModel这个桥梁来进行通信，主要表现在以下三个方面：

1. ViewModel层通过观察数据层的变化，并对视图对应的内容进行实时更新。
2. ViewModel层通过监听视图层的变化，并能够通知数据发生相应变化。
3. ViewModel 层:把 View 需要的层数据暴露，并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责，也就是处理 View 层的具体业务逻辑。ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化，View 层会得到更新；而当 View 中声明了数据的双向绑定（通常是表单元素），框架也会监听 View 层（表单）值的变化。一旦值变化，View 层绑定的 ViewModel 中的数据也会得到自动更新。

三、MVVM模型的特点

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

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

总结

在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

MVVM模型对于前端开发来说，特别重要，是一个必须需要掌握的知识点！敲重点！！！所以在学习vue的过程中也要很好的掌握这些基础概念。冲鸭kk！

本文资料参考自：
深入MVVM模型学习
MVVM模型学习
MVVM是什么？
MVVM简介说明