共计 1612 个字符，预计需要花费 5 分钟才能阅读完成。
一开始，我写的前端是 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 等。标准写法。
以上是集体高见，局部参考官网、技术文章、极客教程，有问题请留言。
