关于MVVM的理解

先导语

我们都知道Vue是一个MVVM的框架，那什么是MVVM呢？今天我们就来理解一下，什么是MVVM。

在很久以前就有"组件化"的概念了，例如：asp,jsp,php在web1.0阶段时就能实现组件化了。在nodejs中也有组件化。下面我们就根据一段nodejs代码来说明下“组件化”的特点。
nodejs代码截图：

根据上面的代码截图，我们可以看出:对应的模块，我们去引入对应的模板文件，然后传入需要的数据。
我们再来对比下vue中的组件化：

通过对比传统的组件化和vue中的组件化，我们会发现，它们的逻辑都是一样的，都是引入需要的模板并传入数据，但是它们有一个本质的区别：vue的组件更新是自动的，而传统组件化的组件更新往往需要手动去操作DOM。造成这个区别的原因是：vue有数据驱动视图！

什么是数据驱动视图呢？
数据驱动视图：当我们想要改变页面上的某些内容时，我们不需要自己去操作DOM，我们只需要去改变相应的数据即可，然后vue这个框架会帮助我们去根据数据重新渲染视图。
vue中是根据MVVM来实现数据驱动视图的!

MVVM:Model-View-ViewModel
我们来看vue官网上给出的MVVM的结构图：

从图中我们可以看出来：view和model之间通过vue提供的viewmodel来关联，当我们的model的数据改变之后，通过viewmodel可以马上反应到view层，而view中的一些DOM操作也可以通过viewmModel反应到Model 层。

通过对组件化以及数据驱动视图的理解，进一步加深了我对MVVM的认识。那么，下次见。好好学习，天天向上！