MVVM是一种软件架构模式它将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开

而vue.js 则是一个轻巧、高性能、可组件化的 MVVM 库，拥有非常容易上手的 API，它是MVVM的很好的一个实践，这里来浅谈一下Vue在数据双向绑定中对MVVM的实践运用吧

MVVM 架构的优点

• 低耦合。视图(View)可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 "View" 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
• 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
• 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计。
• 方便测试。界面素来是比较难于测试的，开发中大部分 Bug 来至于逻辑处理，由于 ViewModel 分离了许多逻辑，可以对 ViewModel 构造单元测试。

Vue专注于MVVM实现了数据的双向绑定，双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。大大方便了数据状态的维护与管理

Vue 对于 MVVM 架构的实践

上面我们了解了MVVM的优点，那么下面就让我们来分析一下Vue.js对于MVVM的实践，数据双向绑定的原理实现吧，先来看下面这张图