https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/8/19/16ca75871ec53fba~tplv-t2oaga2asx-watermark.awebp

MVVM,全称是 Model-View-ViewModel。是一种简化用户界面的事件驱动编程方式。MVVM促进了前端与后端的分离,提高了前端开发效率。

View

视图层。用户页面.主要通过HTML,CSS构建界面与用户交互。

Model

数据模型,也就是数据来源,就是后端的逻辑处理与数据操控。

ViewModel

视图模型层,是连接View和Model中间的桥梁。前端获取到Model返回的数据后,对其二次处理,处理成符合View层预期的数据模型,通过与View层双向绑定,使ViewModel的数据实时反馈在View.这样实现了View和Model的解耦,方便了前后端分离。

双向数据绑定

双向数据绑定就是View发生变化,能实时反应到Model,Model发生变化也能实时响应到View。实现双向数据绑定的技术有所不同。主要有以下几种

  1. 脏值检测(AngularJS)
  2. 数据劫持(Vue2)
  3. 发布订阅者模式(backbone.js) MVC
  4. Proxy代理(vue3)

脏值检测

AngularJS采用的是**脏值检测(dirty check)**的方法,对所有的数据与视图的绑定关系做检测,识别是否有数据发生变更来决定是否需要更新视图。angular只有在指定的事件触发时进入脏值检测,大致如下: