Vue 和React 相同点

1. SPA

1.1.对SPA的理解

   SPA（单页面应用），默认情况下我们编写Vue，React都只有一个html页面，并且提供一个挂载点，切换页面时通过监听路由变化，渲染对应的页面Client Side Rendering，客户端渲染CSR，相对应的有多页面应用（MPA），多个html页面，每个页面必须重复加载js，css等相关资源，（服务端返回完整的html，同时数据也可以在后端进行获取一并返回‘模版引擎’）。多页面应用跳转需要整页资源刷新，Server Side Rendering，服务器端渲染SSR。

1.2.优缺点：

用户体验好，快，内容的改变不需要重新加载整个页面，服务器端压力小 SPA应用不利于搜索引擎的抓取。 首次渲染速度相对较慢（第一次返回空的html，需要再次请求首屏数据）白屏时间长

1.3.解决方案：

   通过SSR+CSR的方式，首屏采用服务端渲染的方式，后续交互采用客户端渲染方式，NuxtJS

标题	单页面应用（SPA）	多页面应用（MPA）
组成	一个主页面和页面组件	多个完整的页面
刷新方式	局部刷新	整页刷新
SEO搜索引擎	无法实现	容易实现
页面切换	速度快，用户体验好	切换加载资源，速度慢，用户体验差
维护成本	相对容易	相对复杂

1.4.单页面应用首屏加载速度慢的怎么解决？

1. 使用路由懒加载、异步组件，实现组件拆分，减少入口文件体积大小（优化体验骨架屏）
2. 抽离公共代码，采用splitChunks进行代码分割
3. 组件加载采用按需加载的方式
4. 静态资源缓存，采用HTTP缓存（强制缓存、对比缓存）、使用lookStorage实现缓存资源
5. 图片资源的压缩，雪碧图、对小图片进行base64减少http请求
6. 静态资源采用CDN提速。终极的手段
7. 使用SSR对首屏做服务端渲染

1.5 前端路由如何切换页面

 react-router6中有三种路由模式，分别为BrowseRouter、HashRouter、MemoryRouter，其中前两个可用于浏览器环境，最后一个用于测试环境。

HistoryRouter可以让用户自定义路由模式。

它们均可以根据路由变化，实现SPA

1.6 React Router中history，hash路由差别

HashRouter最简单，因为服务端并不解析#之后的字符，但是前端可以监听#之后的字符的变化，因此前端可以根据这个变化决定渲染哪个组件。因此，使用HashRouter不需要服务器端的特殊支持。

但是BrowserRouter就不同了，BrowserRouter使用HTML history API（pushState，replaceState 和 popState 事件），让页面的UI同步与URL。服务器端对不同的URL返回不同的HTML

1.7 路由器工作模式

1. 对于一个url 来说，什么是hash  - #及其后面的内容就是hash值。

2. hash值不会包含在HTTP请求中，即：hash值不会带给服务器。

3. hash模式：

   3.1地址中永远带着#号，不美观。

   3.2若以后将地址通过第三方手机APP分享，若app校验严格，则地址会被标记为不合法。

4. 兼容性好。

5. history模式

   5.1 地址干净，美观。

   5.2 兼容性和hash模式相比略差。

   5.3 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

2.Vue，React为什么采用虚拟DOM？

2.1 概念

1. Virtual DOM 就是js对象来描述真实DOM，是对真实DOM的抽象，由于直接操作DOM性能低但是js层的操作效率高，可以将DOM操作转化成操作对象，最终通过diff算法比对差异进行更新DOM（减少了对真实DOM的操作）
2. 虚拟DOM不依赖真实平台环境从而也可以实现跨平台。

2.2 VDOM如何做diff算法

   挂载过程结束后，会记录第一次生成的VDOM - oldVnode

   当响应式数据发生变化时，将会引起组件重新render，此时就会生成VDOM - newVnode

   使用oldVnode 与 newVnode 做diff 操作，将更改的部分显示到真实DOM上，从而转换为最小的dom操作，高效更新视图

3.Vue和React中key 的作用和原理

3.1 key的概念

   key的特殊attribute 主要用在Vue和React的虚拟DOM算法，在新旧nodes对比辨识VNodes。如果不使用key，Vue和React会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法

key值标记了节点在当前层级下的唯一性，因此我们尽量不要取值index，因为在同一层级下，多个循环的index容易重复，并且如果涉及节点的增加，删除，移动，那么key的稳定性将会被破坏，节点就会出现混乱现象

   当Vue正在更新使用 v-for 渲染的元素列表时，它默认使用就地更新的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染

3.2key 的作用

•    通过key可以判断两个虚拟节点是否相同节点（可以复用老节点）
•    无key会导致更新的时候出问题
•    尽量不要采用索引作为key

4.对组建化的理解

•    组建化的好处：高内聚，可重用，可组合
•    组件化开发能大幅提高应用开发效率，测试性，复用性等。
•    降低更新范围，只重新渲染变化的组件

5.函数组件的优势

   函数组件的特性：无状态，无生命周期，无this，但是性能高。正常组件是一个类继承了Vue，函数式组件就是普通的函数，没有new的过程。最终就是将返回的虚拟DOM变成真实DOM替换对应的组件。

6.项目中你是如何解决跨域的呢？

6.1 概念

跨域是浏览器同源策略导致的，这个是浏览器的行为（协议、主机名、端口的不同）。服务端和服务端之间进行通信是没有跨域问题的。跨域的实现方案有很多种。不过常用的就那么几种。

6.2 说一下“同源策略”

协议   子域名   主域名      端口号 资源

http：www. aaa.com   :8080   /index/vue.js

同源策略是浏览器的核心，如果没有这个策略就会遭受网络攻击

主要指的就是协议 + 域名 + 端口号三者一致，若其中一个不一样则不是同源，会产生跨域，三个允许跨域加载资源的标签：img link script ，跨域是可以发送请求，后端也会正常返回结果，只不过这个结果被浏览器拦截了！

JSONP CORS websocket 反向代理

6.3 解决方法

• CORS（Cross-Origin Resource Sharing，跨域资源共享）由服务端设置，允许指定的客户端访问服务器。
• 构建工具中设置反向代理、使用Nginx 做反向代理