1 MVVM

⚡ 30 秒速记

• MVVM = Model（数据）+ View（视图）+ ViewModel（自动把两边同步起来的中间层）
• 对比 MVC / jQuery 时代：以前要手写「取数据 → 找 DOM → 改 DOM」，现在只改数据，视图自动更新
• 变化检测三种路子：AngularJS 脏检查（$digest 循环比较）、Vue 2 的 Object.defineProperty 劫持、Vue 3 的 Proxy
• Vue 2 的边界：新增属性、数组下标赋值、改 length 检测不到，要 Vue.set 或 splice；Vue 3 没这个问题
• React 严格说不是 MVVM，它是单向数据流，靠 setState 显式触发更新，没有自动双向绑定

MVVM 的核心是你只改数据，视图自动跟着变，中间那层 ViewModel 帮你做同步。 jQuery 时代要自己找 DOM 改内容，业务和页面绑死；MVVM 里业务只关心数据流转。至于怎么知道数据变了，有三种做法：AngularJS 是在事件后跑 $digest 把所有绑定比一遍；Vue 2 用 defineProperty 把每个属性改成 getter / setter，读的时候收集依赖、写的时候通知；Vue 3 换成 Proxy，能拦新增属性和数组下标。Vue 2 那几个检测盲区是面试和线上都常碰到的坑。

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 函数，然后再次调用 $digest 循环直到发现没有变化。循环至少为二次 ，至多为十次。

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