【Vue】针对Vue中MVVM的理解

官网说明

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm（ViewModel 的缩写）这个变量名来表示 Vue 实例

因此可以看到，在 Vue 诞生之前 MVVM 模型就已经存在了，并不是 Vue 的作者创造了这个模型！而是 Vue 的作者参考了 MVVM 创造了一个属于 Vue 的模型

MVVM 模型介绍

1. M：模型（Model）：对应 data 中的数据，指的是一般的 js 对象
2. V：试图（View）：模板，指的是 Vue 模板通过解析得到的页面（Dom）
3. VM：视图模型（ViewModel）：Vue 实例对象，包括：
   1. 数据绑定（Data Bindings）：在 Vue 中 data 是一个对象，这个 data 对象中存了一组一组的数据，存在 Model 里面，然后经过 Vue 实例进行数据绑定，就把你的数据摆在了你想要的页面位置（View）
   2. Dom 监听器：监听页面上的改变，然后映射到数据对象上。比如说在输入框里面输入了个 1，然后 1 就跑到了 data 对象里面。

MVVM模型在代码中的表现

MVVM 模型说的通俗一点就是，把一堆数据和一些 Dom 结构通过 Vue 实例做了连接。ViewModel 是中间的纽带和桥梁。前端框架基本上都是这样的一个思想。