欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue中的mvvm模式讲解

程序员文章站 2023-11-18 22:26:58
学习了mvvm模式 起先还觉得有点难,后面与双向数据绑定链接起来还是很容易理解的。 那么什么是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之路吧

总结

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