mvvm

view

• 是视图层，就是用户界面
• 主要由html和css构成，来展示model的数据

model

• 是数据模型，就是从后端操纵的数据

ViewModel

• 是视图数据层
• 封装从后端获取model数据，生成符合view层的视图数据模型，让数据更容易管理和使用
• 视图的状态和行为都封装在ViewModel里，这样可以完整地去描述view层

MVVM

• 是一种软件架构设计模式
• 简化了用户界面的事件驱动编程模式
• 数据和视图是不能直接通信的，只能通过ViewModel通信
• ViewModel能观察到数据变化，然后更新视图
• ViewModel能观察到视图变化，然后更新数据
• 核心就是要实现dom监听和数据绑定

数据解析

• MVC时期的数据解析很简单，一步就能搞定
• 但数据结构越来越复杂，数据解析也就越来越复杂
• Controller被设计出来并不是为了数据解析的
• 为数据解析专门创建了ViewModel

MVVM，为什么没有C了

• VM出现后，导致C的存在感降低了
• MVVM中，C不需要再持有model了，VM持有M，C只要持有VM就行了。可以理解为，M是原始数据，VM是整理后的数据，C只需要整理好的（解析后的）数据

MVVM设计思想

• MVVM是为了前端工程化设计的一个模式
• 后台不需要再关注View层，只需要关注逻辑和数据
• 对后台来说对View层的操作不再重要，模版引擎可有可无
• 真正实现前后端分离
• VM充当了View层和Model层的桥梁，数据层变化会影响展示层，展示层变化也会影响数据层，这就是双向绑定

mvvm最核心的就是数据双向绑定

• angular的脏数据检测
  -- 触发指定事件就会进入脏数据检测
  -- 调用$digest循环遍历所有的数据观察者
  -- 数据有变化，就调用$watch函数

• vue的数据劫持
  -- vue2使用defineProperty来实现数据和界面双向绑定
  -- 通过defineProperty来劫持各个属性的setter和getter
  -- 发布消息给订阅者，触动相应的监听回调
  -- 通过directives指令去对dom进行封装， 数据发生改变，去通知指令修改相应的dom，数据驱动dom
  -- dom listener 监听dom，当修改视图，就会改变数据

• react的数据绑定