MVVM

MVVM 由一下三个内容组成

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

• 在 JQuery 时期，如果需要刷新UI 时，需要先取到对应的 DOM 再更新 UI，这样数据和业务的逻辑就和页面有强耦合
• 在MVVM 中， UI 是通过数据驱动的，数据一旦改变就会响应的刷新对应的 UI ， UI 如果改变，也会改变对应的数据。这种方式就可以在业务处理中 只关心数据的流转，而无需直接和页面打交道。 ViewModel 只关心数据和业务的处理，不关心 View如何处理数据，在这种情况下，View 和 Model 都可以独立出来，任何一方改变了也不一定需要改变另一方，并且可以将一些可复用的逻辑放在一个 ViewModel 中，让多个View 复用这个ViewModel

• 在MVVM 中，最核心的也就是数据双向绑定，例如 Angluar 的脏数据检测， Vue 中的数据劫持

脏数据检测

• 当触发了指定事件后会进入脏数据检测，这时会调用 $digest 循环遍历所有的数据观察者，判断当前是否和先前的值有区别，如果检测到变化的话，会调用 $watch 函数， 然后再次调用 $watch 函数，然后再次调用 $digest 循环知道发现没有变化。循环至少为两次，至多为十次
• 脏数据检测虽然存在低效的问题，但是不关心数据是通过什么方式改变的，都可以完成任务，但是这在 Vue 中的双向绑定是存在问题的。并且脏数据检测可以实现批量检测出更新的值，再去统一更新UI， 大大减少了操作DOM 的次数

数据劫持

• Vue 内部使用了 Obeject.defineProperty() 来实现双向绑定，通过这个函数可以监听到 set 和 get的事件
  上一篇文章有写利用 Obeject.defineProperty() 来实现 一个简单的数据双向绑定
  https://blog.csdn.net/shi851051279/article/details/110573405

Proxy 与 Obeject.defineProperty 对比

• Object.defineProperty 虽然已经能够实现双向绑定了，但是他还是有缺陷的。
  • 只能对属性进行数据劫持，所以需要深度遍历整个对象
  • 对于数组不能监听到数据的变化

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