MVVM框架

MVVM由以下三个内容构成：

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

在JQuery时期，如果需要刷新UI，需要先取到对应的 DOM 再更新 UI，这样数据和业务的逻辑就和⻚⾯有强耦合。

在 MVVM 中，UI 是通过数据驱动的，数据⼀旦改变就会相应的刷新对应的UI，UI如果改变，也会改变对应的数据。这种⽅式就可以在业务处理中只关⼼数据的流转，⽽⽆需直接和页面打交道。ViewModel 只关⼼数据和业务的处理，不关⼼ View 如何处理数据，在这种情况 下，View 和 Model 都可以独⽴出来，任何⼀⽅改变了也不⼀定需要改变另⼀⽅，并且可以将⼀些可复⽤的逻辑放在⼀个 ViewModel 中，让多个 View 复⽤这个 ViewModel。 在 MVVM 中，最核⼼的也就是数据双向绑定，例如 Angluar 的脏数据检测，Vue2中的数据劫持。

脏数据检测

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

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

数据劫持

Vue2 内部使⽤了 Object.defineProperty() 来实现双向绑定，通过这个函数可以监听到 set 和 get 的事件。

Object.defineProperty 虽然已经能够实现双向绑定了，但是他还是有缺陷的。

1. 只能对属性进⾏数据劫持，所以需要深度遍历整个对象

2. 对于数组不能监听到数据的变化

虽然 Vue 中确实能检测到数组数据的变化，但是其实是使⽤了 hack 的办法，并且也是有缺陷的。

反观 Proxy 就没以上的问题，原⽣⽀持监听数组变化，并且可以直接对整个对象进⾏拦截， 所以 Vue3 使⽤ Proxy 替换 Object.defineProperty