02.MVC和MVVM

虚拟DOM

主流的思想：不在直接去操作DOM，而是改为“数据驱动思想”

操作DOM思想：

• 操作DOM比较消耗性能「主要原因就是：可能会导致DOM重排(回流)/重绘」
• 操作起来也相对来讲麻烦一些

驱动思想：

• 我们不会在直接操作DOM
• 我们去操作数据「当我们修改了数据，框架会按照相关的数据，让页面重新渲染」
• 框架底层实现视图的渲染，也是基于操作DOM完成的
  • 构建了一套 虚拟DOM->真实DOM 的渲染体系
  • 有效避免了DOM的重排/重绘
• 开发效率更高、最后的性能也相对较好

状态管理

不再获取DOM元素，直接用state。也就是数据驱动

MVC和MVVM

React框架采用的是MVC体系；

Vue框架采用的是MVVM体系；

NG是MVVM，写法是MVC（不懂）

MVC

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

对应三层，我们的学习目标

1. 视图层：用专业的语法去构建视图\页面（React中是基于jsx语法来构建视图的）。

2. 数据层：视图中，需要“动态”(需要变化，不论是样式还是内容)处理的数据，都要有对应的数据模型。

3. 控制层：在视图中，根据业务需求，进行某些操作时，会修改相关数据，然后React会按最新的数据，重新渲染视图。

   • 数据驱动视图的渲染！！

   • 视图中的表单内容改变，想要修改数据，需要开发者自己去写代码实现！！

     “单向驱动”

MVVM

model数据层 + view视图层 + viewModel数据/视图监听层（数据和视图都被wacher监听）

1. 数据驱动视图的渲染：监听数据的更新，让视图重新渲染

2. 视图驱动数据的更改：监听页面中表单元素内容改变，自动去修改相关的数据

   “双向驱动”

• • +
    

MVC VS MVVM

对比

• MVVM是双向驱动，MVC是单项驱动，表单更新MVVM会自动更新，而MVC需要开发者操作。