小白：学习vue、react的区别

一开始，我写的前端是html+css+js，三个文件组成一个页面。后端填写html的文件路径，将数据和页面同时渲染，用户需要刷新才能访问新页面。这时的html和css不支持变量，所有逻辑都在js中写。

接触到vue、react之后我才了解到mvc、mvvm的...
有baidu说，MVVM是架构模式、设计思想、框架

完整的来说：MVVM是比mvc更优化了，它的设计思想和MVC不同，它将整个开发功能分为三类，形成了一个组成架构：

1. Model：数据层
2. View：视图层，就是实际DOM
3. 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等。规范写法。

---

以上是个人拙见，部分参考官网、技术文章、极客教程，有问题请留言。