vue中的mvvm模式讲解

这篇文章主要为大家详细介绍了vue中的mvvm模式讲解，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

学习了MVVM模式

起先还觉得有点难，后面与双向数据绑定链接起来还是很容易理解的。

 

那么什么是MVVM呢？

 

不明思议咋们肯定和我想的一样   每个单词的首写字母呗！

对没错就是它 Model-View-ViewModel。  可以实现我们的双向数据绑定

 

下面我来用我的理解解析下它们之间的关系：

 

哈哈 有点小尴尬哈

 

先来说下View与Model之间有联系吗？

 

在MVVM架构下，View 和 Model 之间其实并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

 

好啦，说到这可能有些小伙伴会问view 什么，Model是什么？

 

Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；

View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。

现在明白了吧！

 

好啦  我们继续谈谈它们三者之间的关系呀  它们之间是不是有个三角恋呐

 

哈哈  不错

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，ViewModel里面包含DOM Listeners和Data Bindings，DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。

 

mvvm有什么好处呢  当然这个肯定有好处的 不然学它干哈

 

1. 低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

2. 可重用性。可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。

3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。

4. 可测试性。可以针对ViewModel来对界面(View)进行测试

咋们一起走向vue之路吧

 

总结

 

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对四海网的支持。如果你想了解更多相关内容请查看下面相关链接

本文来自：http://www.q1010.com/184/6959-0.html

注：关于vue中的mvvm模式讲解的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js