MVVM

MVVM 由以下三部分组成

• View：界面
• Model：数据模型
• ViewModel：作为桥梁负责沟通View和Model

在 MVVM 中，UI 是通过数据驱动的，数据一旦改变就会相应的刷新对应的 UI，UI 如果改变也会相应的改变数据。

如此，开发者在业务处理中就可以只关心数据的流转，而无需直接和页面打交道啦。

ViewModel只关心数据和业务的处理，不关心View如何处理数据。在此情况下，View和Model都可以独立出来，任何一方改变了也不一定需要改变另一方，并且可以将一些可复用的逻辑放在一个ViewModel中，让多个View复用这个ViewModel

我个人理解来看ViewModel就是一个作为中间商的Dep（订阅器）和Complier(编译器)的结合体，通过他们完成对数据的绑定

其中最核心的就是数据的双向绑定，比如Angluar的脏数据检测，Vue中的数据劫持

脏数据检测

当触发了指定事件后会进入脏数据检测，这时会调用 $digest 循环遍历所有的数据观察者，判断当前值是否和先前的值有区别，如果检测到变化的话，会调用 $watch 函数，然后再次调用 $digest 循环直到发现没有变化。循环至少为二次 ，至多为十次。

脏数据检测虽然存在低效的问题，但是不关心数据是通过什么方式改变的，都可以完成任务，但是这在 Vue 中的双向绑定是存在问题的。并且脏数据检测可以实现批量检测出更新的值，再去统一更新 UI，大大减少了操作 DOM 的次数。所以低效也是相对的，这就仁者见仁智者见智了。

数据劫持

这里我们在另一篇文章 —— Vue双向绑定原理及实现提到过，感兴趣的boy可以去看一下，其中不光引入了数据劫持（通过Object.defineProperty实现）的概念，还涉到了订阅者-发布者模式，以此来实现一个简单的v-model。