框架通识

1. vue和react的区别

	vue	react
设计理念	渐进式框架	函数式编程
学习曲线	Vue的官方文档编写得非常好，Vue的定义比React更严格; 这也意味着它更具稳定性。值得注意的是，在Vue中，许多问题直接在其文档中得到解答，而不需要在其他地方搜索。	React不是一个包含所有功能的框架。它的核心理念是精益，只关注于核心部分，其他功能通过引用第三方解决方案解决。这增加了学习曲线的一些复杂性，因为它根据您在整个过程中对框架所做的选择而有所不同。
工具库的完整度	官方对于状态管理、路由管理、脚手架、API都有更全面的支持	只专注于核心功能，其他的功能都是有社区提供的第三方软件
社区	体量比react小，但发展迅速	体量大，更完善
MVVM和MVC	MVVM	MVC

2. 说一下mvvm和mvc

	MVC	MVVM
原理	目标是关注点分离，通过控制器（controller）管理逻辑和用户输入，强制隔离业务数据（model）和用户界面（view）	MVVM 架构在视图和视图模型之间提供双向数据绑定。它还可以帮助您自动将 View-Model 中的修改传播到视图。视图模型利用观察者模式在视图模型中进行更改。
示意图	传统mvc：Javascript mvc：
优势	1. 松散耦合—— 模型、视图或控制器之间的低耦合

1. 模型的多个视图—— 模型可以有多个视图
2. 同时开发—— 多个开发人员可以同时在模型、控制器和视图上工作（也就是前后端分离） | - MVVM 是 MVC（模型-视图-视图模型）的衍生

• 主要用于现代 SPA JavaScript 框架
• MVVM模式利用声明性数据绑定来允许将视图上的工作与其他层分离 | | | 1. 传统MVC是单向数据流，view和model没有直接联系。

1. Javascript MVC中，与传统的MVC实现有差异，view和model之间是观察者模式，model通知view数据改变，view从model获取新数据 | M-V-VM之间使用的是发布订阅模式，相当于个人（View）、邮局（ViewModel）、个人（ViewModel）之间的关系ViewModel充当订阅者 | | 典型代表 | react，官方说他不是mvc，但我理解他其实就是javascript mvc | vue，对于数据的处理方式，双向数据绑定 |

本身作为一种设计模式，最开始在后端使用，后来发展到前端，JavaScript MVC 框架与传统 MVC 的最大区别在于它对控制器的使用。正是框架作者最初着眼于 MVC 的服务器端解释，意识到它不会在客户端进行 1:1 转换，然后重新解释了MVC 中的 C 以表示他们认为更有意义的东西。

它实际上是三种经典设计模式的变体：观察者模式、策略模式和复合模式

参考：

mvc vs mvvm

mvp mvc mvvm

3. 说一下虚拟DOM？为什么要使用虚拟DOM？虚拟DOM是如何合并patch的？

1. 概念：虚拟dom是用js来表示真实dom，以便于我们对其做对比更新等操作

2. 为什么要使用？

   1. 虚拟dom可以让我们能够在真实dom渲染完成前对其进行操作，减少对真实dom的操作
   2. 只针对变化部分做dom操作

3. 如何patch？

   1. vue：使用双端diff算法，对比变化前后的差异，然后针对变化部分进行更新
   2. React: react则采用从左到右依次比对的方式
   3. 当一个集合，只是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到第一个。总体上，vue的对比方式更高效。

4. react和vue中key的作用

key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。

5. react和vue的dom diff算法对比

	react	vue
diff原理	使用fiber架构。浏览器执行JavaScript 的线程和渲染真实 DOM 的线程是互斥的，基于这种 Fiber 的数据结构可以实现由原来不可中断的更新过程变成异步的可中断的更新。fiber是使用单向链表实现的，没有尾指针，所以目前无法实现双端diff算法	双端对比算法（最长递归子序列算法）。
diff方式	深度优先，从左向右
对静态节点的处理	jsx编写的，无法做静态解析	有template模版，可以进行静态解析，不对静态节点进行比对

6. SPA vs MPA

	SPA	MPA
加载方式	一次加载所有内容，跳转页面不需要重新加载。可以使用路由懒加载方式优化	每次只加载当前页面的内容，跳转页面要重新加载
SEO	绝大多数代码都是通过js编写的，搜索引擎不支持，因此无法进行SEO优化。可以用过SSR来优化	可以实现更好的网站定位，因为每个页面都可以针对不同的关键字进行优化

写在最后

---

往期文章

前端面经整理系列一（javascript篇

前端面经整理系列二（css篇