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

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 了。