一些前端面试的知识点（部分，无序）

一、vue和react的区别

React

React主张是函数式编程的理念， 实现了前端界面的高性能高效率开发，react很擅长处理组件化的页面。React的官方网站提到了“学习一次，随处写作”这个关键功能，可以使用React框架在JavaScript中构建移动应用程序。在 React 中，所有的组件的渲染功能都依靠 JSX，它是JavaScript的语法扩展，它在创建UI组件和调试时非常简单有用。

Vue

Vue是渐进式JavaScript框架。“渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个概念。Vue可以在任意其他类型的项目中使用，使用成本较低，更灵活，主张较弱，在Vue的项目中也可以轻松融汇其他的技术来开发。特点：易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）。

框架共同点

①都使用虚拟dom。

②提供了响应式和组件化的视图组件。

③把注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。(vue-router、vuex、react-router、redux等等)

数据是否可变

React：整体是函数式的思想，在react中，是单向数据流，推崇结合immutable来实现数据不可变。

Vue：的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

React

1、构建一个大型应用项目时：React的渲染系统可配置性更强，和React的测试工具结合起来使用，使代码的可测试性和可维护性更好。大型应用中透明度和可测试性至关重要。

2、同时适用于Web端和原生APP时：React Native是一个使用Javascript构建移动端原生应用程序（iOS，Android）的库。 它与React.js相同，只是不使用Web组件，而是使用原生组件。

Vue

1、构建数据简单中小型应用时：vue提供简单明了的书写模板、大量api、指令等等，可快速上手、开发项目

2、应用尽可能的小和快时：随着vue3.0的发布，vue的体积进一步缩小，远小于react的体积，也配合diff算法，采用proxy去实现双向绑定，渲染大幅度提升

二、这些框架和jquery的区别 

两者的区别：

1、 数据和视图的分离

所谓视图就是dom，jquery的视图在html里面，也有在js里面，上面的例子比如li。他把视图和数据混在一块了，所以jquery，数据和视图没有分离。混在一块的坏处1，不符合开放封闭原则，对扩展开放，对修改封闭。所有这种混在一块的，都违背了扩展封闭原则。

vue中找数据和dom非常方便，数据是哪块，dom是哪块。数据和视图是分离的，数据就是data，vue中的列表不是空壳是有内容的。

2、 以数据驱动视图

意思是我只改数据，jquery就违背了这点，li标签是生生append到list中。这种清空value是直接以底层到api来操作的。所以jquery中以数据驱动视图是完全没有的，不存在的。以数据驱动视图是通过数据的修改，由框架自动的把视图改了，我们不用管dom元素是怎么样的。jquery是干预了视图的修改。

vue中以数据驱动视图更明显了，在点击按钮的时候，只是把数据push到list，没有操作dom，只是关心数据到变化，数据到清空也是只关心数据到变化。

这种是不是更符合我们到开发模式，我们希望把数据模型改了就好，不需要管dom，dom的渲染其实跟业务流程关系不大。我们只需要关心数据的变化。数据和视图的分离，问题主要是解耦（开放封闭原则）。

三、vdom(虚拟DOM)性能会更好吗 

会  提高页面加载速度

你就应该知道为什么要用diff算法了吧，找出需要更新的节点，找出的过程就是应用了diff算法。

 四、diff算法

1、什么是diff算法？

所谓diff算法，就是用来找出两段文本之间的差异的一种算法。

作为一个前端，大家经常会听到diff算法这个词，其实diff并不是前端原创的算法，其实这一个算法早已在linux的diff命令中有所体现，并且大家常用的git diff也是运用的diff算法。

2、vdom为什么用diff算法

DOM操作是非常昂贵的，因此我们需要尽量地减少DOM操作。这就需要找出本次DOM必须更新的节点来更新，其他的不更新，这个找出的过程，就需要应用diff算法。

3、vdom中diff算法的简易实现

以下代码只是帮助大家理解diff算法的原理和流程，不可用于生产环境。

四、部署的流程 怎么解决跨域的？ 

 

同源策略： 是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

同源定义： 如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。

下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:

URL	结果	原因
http://store.company.com/dir2/other.html	同源	只有路径不同
http://store.company.com/dir/inner/another.html	同源	只有路径不同
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同 ( http:// 默认端口是80)
http://news.company.com/dir/other.html	失败	主机不同

那么，通常有以下三种方式解决跨域：

1. 均使用 tomcat 部署，这样 ip + 端口一样，浏览器同源策略也符合；

这种方式就比较简单，启动 tomcat，把前端资源和后端项目放到 tomcat 的 webapp 下，这样前后端的 ip 和端口端口都一样，也就不会出现跨域问题了。

2. 把 Vue 项目打包放进后端的 static（以springboot项目为例） 文件中，访问使用路径的方式访问；

这种方式类似第一种方式，均使用后端项目的端口，使用app + 静态文件路径访问

3. 使用 Nginx 反向代理部署【推荐】。

这是推荐的方式，核心就是让前端服务访问同源同端口下的不同后端项目，而在Nginx中对该path进行拦截。

比如，你的前端应用地址是 ip:8080，后端应用地址是 ip-manage:8088，那么，只需要配置后进行转发即可，注意，配置后，前端应用的访问路径仅改变path，协议（protocol）+主机（host）+端口（port）需保持一致。

（1）.安装

百度

（2）.配置

安装完成后，打开 Nginx 配置文件nginx.conf：

mac 中的路径为：/usr/local/etc/nginx/nginx.conf

然后进行如下配置：

比如，你的后端接口实际地址为 xxxx:8080/api/get/userinfo

那么，你只需要增加：

# 配置 api 转发

location /api/ {

    proxy_pass http://xxxx:8080;

}

然后，在前端请求 api 的时候，就使用 Nginx 的端口地址即可。

（3）.示例

比如，我们把前端项目部署在 80 端口，请求后端的 api 则使用 http://xxxx/api/get/userinfo 即可，Nginx会自动转发到 8080 端口上，参考下图：

 

 

（4）.重载Nginx配置

配置完成之后，使用以下命令刷新配置（mac为例）

brew services reload nginx 

然后，再次启动你的项目，你会发现可以正常访问了！