一开始我写的前端是html+css+js，三个文件组成一个页面。后台填写html文件路径，同时渲染数据和页面，用户需要刷新访问新页面。这个时候html和css都不支持变量，所有的逻辑都是用js写的。接触vue和react后，又了解了mvc和mvvm。。。有百度说MVVM是一个完整的架构模式，设计思想，框架：MVVM比mvc更优化，其设计思想不同于MVC，它把整个开发功能分为三类，形成一个组成结构：Model：数据层View：视图层，也就是实际的DOMView-Model：数据层和视图层的桥梁，第一个功能在数据绑定，二是DOM监控。在前端MVVM模式下，诞生了很多框架。他们的开发理念不同，但目标都是以数据驱动页面。区别在于如何处理数据变化并通知dom：Angular是脏检查。每次用户每次交互都会检查数据是否有变化，如果有变化就更新DOM。后来发布了Angular1，引入了ts和rxjs，但是不向前兼容，所以在国内没有推广。Vue1——采用数据劫持&发布-订阅模式，Vue1.0通过ES5提供的Object.defineProperty()方法劫持（监听）各个属性的getter和setter，当数据（对象）发生变化时通知订阅或,触发相应的监听回调。（来自掘金文章部分：https://juejin.cn/post/684490...）当项目变大时，数据也会变大，watchers的增加会影响性能。Vue2——加入虚拟DOM，解决响应式数据内存占用过大的问题——vue1的responsive+vue2的虚拟DOM，组件之间的变化，通过responsive通知更新。组件内部的数据发生变化，通过虚拟DOM更新页面。这样一来，响应式监听器是在组件级别控制的，虚拟DOM的大小也是在组件大小上控制的。Vue3——使用Proxy代替Object.defineProperty()，为虚拟DOM添加静态标记和自动缓存功能，让静态部分跳过虚拟DOM的计算，真正实现按需更新，性能提升非常好.另外，vue2的OptionAPI改成了compositionAPI组合语法，必须同时学习vite。React-虚拟DOM，一个描述整个DOM结构的json对象。当数据发生变化时，会生成一个新的虚拟DOM，使用diff算法进行差异比较，并通过setState函数通知实际DOM。但是如果虚拟DOM很大，显示的最小刷新率是1s60fps，也就是16ms的一帧，如果比对时间超过16ms，就会出现页面卡顿。为了突破性能瓶颈，React借鉴了操作系统时间分片的概念，因此引入了fiber框架——浏览器提供了一个叫requestIdleCallback的api，空闲时会通知你。由于这个api的兼容性，React自己实现了一个。首先，将原来的递归改为链表，在浏览器空闲时计算diff，解决了卡顿的问题。虚拟DOM的第一个优点是抽象，不受web端的限制，可以跨终端开发，适用于小程序和客户端。第二个好处是比较虚拟DOM比比较真实DOM更方便、更快捷。因为真正的DOM挂载的东西太多了。Svelte-和React或Vue一样，它们都需要浏览器做额外的工作让浏览器理解，使用虚拟DOM来消耗框架计算并加重垃圾收集器的负担。而Svelte直接将组件转换为命令式代码，以便在构建/编译时操作实际的DOM。vite也支持这个框架。它们的模板语法也不同：react——jsx，而最终jsx会在编译层，也就是工程编译成js执行的地方，所以react最终拥有了js的所有动态，导致API非常少，只有state、hooks、components几个概念，主要是js本身的语法和特性。vue——模板，语法限定，v-if\v-for等规范写法。以上是本人浅见，部分参考官网、技术文章、极客教程，有问题请留言。
