MVVM和MVC体系的区别【2023】

MVC – React框架

构建视图层：react基于jsx语法进行构建
构建数据层：视图层中需要动态处理，都要对应的数据模型
构建控制层：视图中根据业务要求进行某些操作时，去修改相关数据，然后react会按照最新的数据，重新渲染视图，数据驱动视图的渲染。
react中控制层controller基于交互逻辑修改数据，在数据层修改之后，重新渲染视图层，这时视图层会更新页面数据，在视图层进行一系列人机交互可以控制控制层使得控制层继续修改数据层。
react内部实现了对应机制，可更改状态的同时，通知视图渲染，但没有对状态做任何数据劫持，而是提供对应的方法，实现状态更新视图渲染。react为单向数据驱动框架，视图中表单内容改变，需要开发人员自己实现。

MVVM – Vue框架

Model：对应data中数据
View：视图模版
viewModel：Vue实例
Vue中的数据代理，通过vm对象代理data对象中的属性的操作(读/写)。
Vue的基本原理是通过Object.defineProperty()把data对象中所有属性添加到vue实例对象上，为每个添加到vm的属性，都是指定一个getter / setter，在getter / setter内部操作data中对应的属性。
数据驱动视图的更改：监听数据的更新，让视图重新渲染。
视图驱动数据的更改：监听页面中表单元素内容改变，自动去修改相关数据。