2.MVC模式与MVVM模式

1.流行前端框架：

• React
• Angular
• Vue

 主流思想：不直接操作DOM，而是采用数据驱动视图。

操作DOM的思想：

• 比较消耗性能，因为会导致DOM重排（回流），重绘。
• 操作过程麻烦

 数据驱动思想：

• 通过指令绑定，修改数据，不会直接操作DOM。
• 采用虚拟DOM、diff算法。
• 底层也是基于操纵DOM
• 减少了重排重绘。

2. React采用MVC模式，Vue采用MVVM模式

MVC:model数据层+view视图层+controller控制层

• 构建视图：react基于jsx构建视图层
• 构建数据层：对视图展示的数据创建数据模型
• 控制层：操作数据，react框架根据数据重新渲染

MVVM:model数据层+view视图层+viewmodel数据/视图监听层

• 构建视图：vue采用template模板语法
• 构建数据层：对视图展示的数据创建数据模型
• 数据/视图监听层：vue监听数据变化，实现双向数据绑定。

区别：

• MVVM具有双向数据绑定，视图也可以驱动数据修改。
• MVC单向数据驱动，需要手动实现双向数据绑定。