一开始，我写的前端是html+css+js，三个文件组成一个页面。后端填写html的文件门路，将数据和页面同时渲染，用户须要刷新能力拜访新页面。这时的html和css不反对变量，所有逻辑都在js中写。
接触到vue、react之后我才理解到mvc、mvvm的...
有baidu说，MVVM是架构模式、设计思维、框架
残缺的来说：MVVM是比mvc更优化了，它的设计思维和MVC不同，它将整个开发性能分为三类，造成了一个组成架构：
- Model：数据层
- View：视图层，就是理论DOM
- View-Model：数据层和视图层的桥梁，性能一是在数据绑定，二是DOM监听。
在前端MVVM模式下，诞生了很多框架，他们的开发理念各不相同，但指标都是以数据驱动页面，不同点在于怎么解决数据的变动，并告诉dom的：
Angular是脏查看，每一次用户交互都查看一次数据是否变动，有变动就去更新DOM。起初出了Angular1，引入ts,rxjs，但不向前兼容，所以国内不推广。
Vue1——采纳数据劫持&公布-订阅模式的形式，Vue1.0通过ES5提供的Object.defineProperty() 办法来劫持（监控）各属性的 getter 、setter ，并在数据（对象）产生变动时告诉订阅者，触发相应的监听回调。（来自掘金文章节段：https://juejin.cn/post/684490...）我的项目大了之后，数据也会变多，watcher的增多会影响性能。
Vue2——减少了虚构DOM解决响应式数据过多的内存占用问题——vue1的响应式+vue2的虚构DOM，组件之间的变动，通过响应式来告诉更新。组件外部的数据变动，通过虚构DOM更新页面。这样就把响应式的监听器，管制在组件级别，虚构DOM的量级，也管制在了组件的大小。
Vue3——应用Proxy代替 Object.defineProperty()，在虚构DOM减少了的动态标记和主动缓存性能，让动态的局部跳过虚构DOM的计算，真正做到了按需更新，很好的进步了性能。另外从vue2的Option API改为了Composition API组合语法，同时也要学习vite咯。
React——虚构DOM，一个形容整个DOM构造的json对象。在数据变更时，生成新的虚构DOM，应用diff算法比拟不同，通过setState函数告知理论DOM。然而如果虚构DOM很大，而显示器最低刷新频率为1s60fps,也就是一帧16ms，比拟工夫如果超过了16ms，就会体现为页面卡顿。
React 为了突破性能瓶颈，借鉴了操作系统工夫分片的概念，所以引入了fiber框架——浏览器提供了一个api叫requestIdleCallback, 会在闲暇的时候告诉你，因为这个api兼容性问题，React本人实现了一个。首先将原来递归改为链表，在浏览器闲暇工夫计算diff，解决了卡顿的问题。
虚构DOM的益处第一个在于它是形象的，脱离了web端的限度，这样就能够跨端开发，利用在小程序、客户端了。第二个益处是相比拟于比照实在DOM来说，比拟虚构DOM更不便和疾速。因为实在DOM挂载了太多货色了。
Svelte——像React或vue,他们都要浏览器做额定的工作能力让浏览器了解，应用虚构DOM耗费帧计算并给垃圾收集器减少累赘。而Svelte在构建/编译时，间接将组件转换为命令式代码操作理论DOM。vite也反对了这个框架。
他们的模板语法也不一样：
react——jsx，最终jsx都会在compiler那一层，也就是工程化哪里编译成js来执行，所以react最终领有了全副js的动态性，导致了API很少，只有state、hooks、components几个概念，次要都是js自身的语法和个性。
vue——template，语法则限定死，v-if\v-for等。标准写法。
以上是集体高见，局部参考官网、技术文章、极客教程，有问题请留言。