MVVM 模型是一种实现双向数据绑定的框架设计原理。

MVVM(Model View ViewModel)

  • MVVM 是什么?
    • 即是 模型-视图-视图模型,它是一种实现数据双向绑定的模式,是一种框架(VUE)的设计原理。
    • 【模型】指的是后端传递的数据。
    • 【试图】指的是看到的画面。
    • 【视图模型】是 mvvm 模式的核心,它是连接 view和model 的桥梁。
      • 1)将【模型】转换成【试图】,就是将后台传递过来的数据转换成所要看到的页面,实现的方式是:数据绑定。
      • 2)将【视图】转换成【模型】,就是把所看到的页面转换成后台的数据。实现的方式是:DOM 事件监听。因此两个方向都可以实现的,我们称之为数据的双向绑定。
    • 总结:在 MVVM 的框架下【模型】和【视图】是不能直接相互通信的。所以他们通常需要【视图模型】作为一个observer(观察者),在每当数据发生变化的时候,ViewModel(【视图模型】)能够监听到数据的这种变化,近而通知到对应的试图做自动更新。然而也可以在用户操作视图的时候,ViewModel(【视图模型】)也能够监听到视图的变化,之后通知数据做出相应的改动,这实际上就实现了数据的双向绑定。MVVM流程图如下:
      +
  • MVVM 模型存在的意义?
    • 历史原因:在过去的10年中,我们把很多传统的服务器代码放置到了浏览器当中,因此这样就产生了成千上万行的 javascript 代码,它们连接了各种各样的 HTML 和 CSS 文件,但缺乏正规的组织形式,这也是为什么越来越多的开发者javascript 框架。比如 angular、react、vue。
    • 技术原因:浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大,项目的可维护性和扩展性、安全性等已经成了主要的问题。当年为了解决浏览器兼容性问题,出现了很多类库,其中最典型的就是jQuery。但是这类库没有实现对业务逻辑的分成,所以维护性和扩展性极差。
    • 总结上述的两方面的原因,才有了 MVVM 模型一类框架的出现,比如 vue,通过数据的双向绑定,极大的提高了开发效率。

猜你喜欢

转载自blog.csdn.net/weixin_43618932/article/details/88743525
今日推荐