Vue之MVVM概念详解_前端_web_建站_vue_react_leaflet_arcgis

MVVM分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）
1、 M：模型层，主要负责业务数据相关；
2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；
3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；

此图解释：

View是视图页面，要想显示或更新页面就要通过DOM来显示，但是并不直接去操作DOM。在View里面有两种语法概念是指令和大括号表达式，用来显示数据。

Model简单来说就是数据，这些数据提供给View使用。View在Vue的实例（实例就相当于new的一个对象）支撑下就能够自动去Model拿取数据。

下图中的②就是通过View中的Data Bingdings（数据绑定，也就是Vue的实例）拿数据的。

上图中的①，View中的数据发生变化时，Model可以通过DOM Listeners（DOM监听器）实时的给View提供数据。这里还是举个栗子吧，就比如说在页面里面有个输入框，当输入数据之后，马上就要数据就会扩大十倍并显示出来，这时Model就是实时提供View需要的数据。

Vue之MVVM概念详解