vue中的mvvm模式讲解

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

对此感兴趣的朋友，看看idc笔记做的技术笔记！

学习了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之路吧

总结

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

注：关于vue中的mvvm模式讲解的内容就先介绍到这里，更多相关文章的可以留意