关于vue.js:MVVM框架模式详解

5次阅读

共计 953 个字符,预计需要花费 3 分钟才能阅读完成。

MVVM 定义

MVVM 是 Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其 外围是提供对 View 和 ViewModel 的双向数据绑定,这使得 ViewModel 的状态扭转能够主动传递给 View,即所谓的数据双向绑定。

在 MVVM 的框架下视图和模型是不能间接通信的。它们通过 ViewModel 来通信,ViewModel 通常要实现一个 observer 观察者,当数据发生变化,ViewModel 可能监听到数据的这种变动,而后告诉到对应的视图做自动更新,而当用户操作视图,ViewModel 也能监听到视图的变动,而后告诉数据做改变,这实际上就实现了数据的双向绑定。并且 MVVM 中的 View 和 ViewModel 能够相互通信。

#MVVM 流程图:

#MVVM 的特点

#1. 低耦合性。

View 能够独立于 Model 变动和批改,一个 ViewModel 能够绑定到不同的 View 上,当 View 变动的时候 Model 不能够不变,当 Model 变动的时候 View 也能够不变。

#2. 可重用性。

把一些视图逻辑放在一个 ViewModel 外面,让很多 View 重用这段视图逻辑,也就是组件化思维。

#3. 独立开发。

开发人员能够专一于业务逻辑和数据的开发(ViewModel),设计人员能够专一于页面设计。

#MVVM 框架模式的益处

  • 双向绑定技术,这是 MVVM 思维主打的思维,也是它的最长处
  • View 的性能进一步的强化,具备管制的局部性能,若想有限加强它的性能,甚至控制器的全副功简直都能够迁徙到各个 View 上(不过这样不可取,那样 View 干了不属于它职责范畴的事件)。View 能够像控制器一样具备本人的 View-Model.
  • 因为控制器的性能大都挪动到 View 上解决,大大的对控制器进行了瘦身。
  • 能够对 View 或 ViewController 的数据处理局部形象进去一个函数解决 model。

#MVVM 框架模式的有余

  • 数据绑定使得 Bug 很难被调试。界面呈现了异样,有可能是 View 的代码有问题,也可能是 Model。
  • Model 长期持有,不开释内存,就造成了破费更多的内存
  • 数据双向绑定不利于代码重用。客户端开发最罕用的重用是 View,然而数据双向绑定技术,让你在一个 View 都绑定了一个 model,不同模块的 model 都不同。那就不能简略重用 View 了。
正文完
 0