MVC模式和MVVM模式

190 阅读2分钟

React是Web前端框架

1.目前市面上比较主流的前端框架

+ React

+ Vue

+ Angular「NG」

+ ...

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

操作DOM思想:

  + 操作DOM比较消耗性能「主要原因就是:可能会导致DOM重排(回流)/重绘」

  + 操作起来也相对来讲麻烦一些

  + ...

数据驱动思想:

  + 我们不会在直接操作DOM

  + 我们去操作数据「当我们修改了数据,框架会按照相关的数据,让页面重新渲染」

  + 框架底层实现视图的渲染,也是基于操作DOM完成的

    + 构建了一套 虚拟DOM->真实DOM 的渲染体系

    + 有效避免了DOM的重排/重绘

  + 开发效率更高、最后的性能也相对较好

2. React框架采用的是MVC体系;Vue框架采用的是MVVM体系;

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

  @1 我们需要按照专业的语法去构建视图(页面):React中是基于jsx语法来构建视图的

  @2 构建数据层:但凡在视图中,需要“动态”处理的(需要变化的,不论是样式还是内容),我们都要有对应的数据模型

  @3 控制层:当我们在视图中(或者根据业务需求)进行某些操作的时候,都是去修改相关的数据,然后React框架会按照最新的数据,重新渲染视图,以此让用户看到最新的效果!

  数据驱动视图的渲染!!

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

  “单向驱动”

QQ图片20221208210933.jpg MVVM:model数据层 + view视图层 + viewModel数据/视图监听层

  @1 数据驱动视图的渲染:监听数据的更新,让视图重新渲染

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

  “双向驱动”