不愧是腾讯，面完满头大汗

哈喽，大家好，我是千羽。

由于没有提前做好复习，所以有点匆忙，腾讯一面问的不难，从vue，react，webpack等等，倒是没准备好，导致回答的满头大汗~~

Vue路由模式有几种？有什么区别？

Vue路由模式主要有三种，分别是Hash模式、History模式和Abstract模式。

1. Hash模式：使用URL的hash值作为路由。这种模式下，URL中会出现“#”字符。当hash值改变时，不会触发页面的重新加载，也不会向服务器发送请求，只会触发hashchange事件。这种模式不需要服务器端的配置，所有浏览器都支持。
2. History模式：使用HTML5 History API来管理路由。在这种模式下，URL的路径会显示在地址栏中，更加符合传统的URL格式。当路由发生改变时，整个地址会重新加载，可以保存历史记录，方便使用前进和后退功能。这种模式需要服务器端的配置支持，因为如果前端的URL和后端发起请求的URL不一致，会导致404错误。
3. Abstract模式：是支持所有JavaScript运行模式的路由模式。如果浏览器不支持任何API，路由会自动强制进入这个模式。

以上信息仅供参考，建议查阅专业书籍或咨询专业人士以获取更准确的信息。

Vue最大的优点和缺点是什么？

Vue最大的优点是简单易用，它采用简单直观的API实现响应式的数据绑定，使得前端开发更加高效和便捷。同时，Vue还提供了丰富的组件库，如Element UI、Vuetify等。

Vue也缺点。不适合大型复杂的单页应用。对于需要高度定制化的应用，Vue可能无法满足一些特定的需求。

有实战过React吗？和Vue对比有什么区别和优缺点？

React和Vue的区别主要在于它们的核心思想和实现方式。

Vue的核心思想是数据驱动视图，它通过数据绑定和组件化的方式，使得开发者可以更加高效地开发出复杂的用户界面。

React的核心思想是组件化，它将UI分解为一个个小的组件，每个组件都有自己的状态和逻辑，这使得React的代码更加模块化和可维护

Class组件和函数组件有什么区别？

从语法上看，Class组件使用ES6的class语法定义，而函数组件则使用简洁的函数语法定义。函数组件的语法更简洁明了，而Class组件则需要额外的class和constructor定义。

从功能上看，Class组件和函数组件都具备渲染UI的功能，但Class组件还具备状态管理、生命周期方法等额外功能。相比之下，函数组件更加简单纯粹，专注于渲染UI。

从性能上看，由于函数组件没有状态和生命周期方法，因此在渲染时更加高效。而Class组件可能会涉及到更多的计算和状态更新，因此在某些情况下性能可能不如函数组件。

React组件间数据传递方式

1. props：通过props进行数据传递是最常见的方式。父组件将数据作为props传递给子组件，子组件通过props接收数据。需要注意的是，props是单向的，只能从上往下传递。
2. context：context相当于一个全局的变量，是一个大的容器，可以把需要传递的数据放在这个容器中，不论嵌套多深都可以轻易的使用。在父组件中使用context对象将需要传递的数据存储在context中，子组件通过使用context来获取数据。这种方式可以实现跨级组件间的数据传递。
3. 回调函数：当子组件需要向父组件传递数据时，可以通过回调函数实现。父组件将一个回调函数作为props传递给子组件，子组件在需要的时候调用该回调函数，并将数据作为参数传递给父组件。
4. Redux：Redux是一个用于管理应用状态的状态管理库，可以将应用中的所有组件状态集中存储在一个单一的store中。通过Redux，可以在整个应用中传递数据，而不限于单个组件之间。
5. 事件总线（Event Bus）：通过创建一个事件总线（Event Bus）对象，可以在组件之间进行数据的发布和订阅。发布者将数据发布到事件总线，订阅者通过监听事件总线来获取数据。这种方式适用于没有直接关系的组件间传递数据。

用过打包工具吗？介绍一下Webpack

Webpack的核心功能包括：

1. 模块化：Webpack将所有资源（JavaScript、CSS、图片等）视为模块，可以根据需要进行打包和引用。
2. 打包：Webpack将根据模块之间的依赖关系进行静态分析，生成对应的静态资源。
3. 优化：Webpack提供了各种插件和配置选项，可以对生成的资源进行压缩、混淆、拆分等优化操作，提高应用程序的性能。
4. 开发服务器：Webpack自带开发服务器，可以实时编译和刷新页面，方便开发过程中的调试和测试。

用过哪些Loader和Plugin？

1. babel-loader：用于将ES6+的JavaScript代码转换为ES5代码，以便在旧版本浏览器上运行。
2. css-loader：用于处理CSS文件，支持CSS模块化、变量等特性。
3. style-loader：将样式添加到HTML页面中。
4. url-loader：用于处理图片和其他二进制文件，可以按需打包。
5. file-loader：用于处理非JavaScript文件，如图片、字体等。

1. webpack.optimize.UglifyJsPlugin：用于压缩和混淆JavaScript代码。
2. webpack.DefinePlugin：用于在编译时定义全局常量。
3. webpack.ProvidePlugin：自动加载模块，无需手动require。
4. webpack.HotModuleReplacementPlugin：实现模块热替换（HMR）。

Plugin的原理和编写思路是怎么样的？

1. 插件是一个独立的模块，需要暴露出一个js函数。这个函数接收一个参数，即Webpack的compiler对象，通过它插件可以访问到Webpack的内部数据和API。
2. 插件函数可以定义一些钩子(hook)，这些钩子会在Webpack的特定生命周期事件发生时被触发。例如，插件可以在入口钩子(entryOption)中修改入口文件，或者在编译完成钩子(compile)中执行一些清理工作。
3. 插件可以通过compiler对象的apply方法将自身挂载到Webpack上，这样就可以监听到Webpack的各种事件。在事件触发时，插件可以执行相应的逻辑。
4. 插件可以访问到Webpack的配置信息，这些信息可以在插件中用于处理不同的任务。例如，可以根据配置信息来决定是否要压缩代码，或者是否要在生产环境中使用某个特定的loader。
5. 编写一个Webpack插件需要先确定要解决的问题，然后确定在Webpack的哪个生命周期钩子中执行相应的逻辑。接着实现这个逻辑，最后通过apply方法将插件挂载到Webpack上。

前端异常和性能监控怎么做？让你设计一个异常和性能监控平台你会怎么设计？

异常监控：

• 使用try-catch语句捕获异常：在JavaScript代码中，可以使用try-catch语句来捕获异常。当try块中的代码发生异常时，控制流将立即转到相应的catch块中。
• 使用window.onerror事件：当JavaScript代码中出现未捕获的异常时，可以使用window.onerror事件来捕获错误信息。可以在事件处理函数中记录错误信息，以便后续分析和处理。
• 使用第三方监控工具：可以使用一些第三方监控工具，如Sentry、Bugsnag等，来收集和记录异常信息。这些工具可以帮助你监控和修复应用程序中的错误和异常。

性能监控：

• 使用performance API：可以使用浏览器提供的performance API来监控应用程序的性能。例如，可以使用performance.timing对象来获取页面加载时间和其他性能指标。
• 分析和优化渲染性能：渲染性能是影响用户体验的关键因素之一。可以通过分析和优化DOM操作、减少重绘和回流、使用requestAnimationFrame等技术来提高渲染性能。
• 使用第三方性能监控工具：可以使用一些第三方性能监控工具，如Google Analytics、New Relic等，来收集和分析应用程序的性能数据。这些工具可以帮助你识别和解决性能瓶颈。

LocalStorge和cookie有什么区别？

1. 数据存储：LocalStorage可以存储的数据量比Cookie更大。LocalStorage的存储容量大约为5MB，而Cookie的存储容量相对较小，通常只有约4KB。
2. 数据有效期：LocalStorage中的数据是永久存储的，除非被明确删除，否则它将一直存在。而Cookie的有效期通常较短，并且可以由服务器或客户端设置过期时间。一旦Cookie过期，它将被自动删除。
3. 数据共享：LocalStorage中的数据可以在同一浏览器的任何站点之间共享，这意味着如果一个站点存储了一些数据，其他站点也可以访问这些数据。而Cookie则更加安全，它只能由设置它的站点访问，其他站点无法访问。
4. 存储类型：LocalStorage可以存储任何类型的数据，包括字符串、对象、数组等。而Cookie只能存储字符串数据，如果需要存储复杂的数据类型，需要进行序列化。

ES6实现排序有哪几种方式？

在ES6中，实现排序的方法主要有以下几种：

1. Array.prototype.sort() 方法：这是JavaScript中内置的排序方法，可以对数组进行排序。它接受一个可选的比较函数作为参数，该函数决定了排序的顺序。如果没有提供比较函数，sort()方法将把数组的所有元素转换为字符串，然后按照字符顺序进行排序。

let arr = [3, 1, 4, 1, 5, 9];
arr.sort(); // [1, 1, 3, 4, 5, 9]

1. 使用...操作符进行排序：在ES6中，可以使用扩展操作符(...)将数组展开，然后使用sort()方法进行排序。这种方法与直接在数组上调用sort()方法效果相同。

let arr = [3, 1, 4, 1, 5, 9];
[...arr].sort(); // [1, 1, 3, 4, 5, 9]

1. 使用Array.prototype.sort()方法进行自定义排序：sort()方法可以接受一个比较函数作为参数，该函数决定了排序的顺序。通过传递自定义的比较函数，可以实现自定义的排序逻辑。

let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b); // [1, 1, 3, 4, 5, 9]

在上面的例子中，比较函数 (a, b) => a - b 将数组元素转换为数字，然后进行比较和排序。

1. 使用for循环进行排序：虽然ES6提供了内置的排序方法，但在某些情况下，使用for循环进行排序可能更加方便。可以使用一个简单的for循环和交换变量的方法来实现排序。

let arr = [3, 1, 4, 1, 5, 9];
for (let i = 0; i < arr.length; i++) {
  for (let j = i + 1; j < arr.length; j++) {
    if (arr[i] > arr[j]) {
      let temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
    }
  }
}
// [1, 1, 3, 4, 5, 9]

解决跨域的方式有哪几种？分别是什么原理和实现形式？

1. JSONP：JSONP通过动态插入<script>标签实现跨域请求。原理是利用了script标签不受浏览器同源策略的限制，通过在请求的URL中添加一个回调函数名参数，让服务器返回类似函数调用的数据结构，从而实现跨域请求。但JSONP只支持GET请求，且存在安全漏洞，容易受到XSS攻击。
2. CORS：CORS（跨域资源共享）是一种基于HTTP头的机制，通过在服务器的响应头中设置一些特定的HTTP头部信息，来允许来自不同域的请求访问该服务器的资源。在客户端发起请求时，浏览器会先发送一个预检请求（OPTIONS请求），询问服务器是否允许跨域请求。
3. 代理服务器：代理服务器可以作为同源服务器上的一个中间件，通过转发跨域请求，实现不同源服务器之间的通信。原理是在同源服务器上建立一个代理服务器，利用服务器请求服务器不受浏览器同源策略的限制。

作者：前端LeBron

链接：https://juejin.cn/post/7025793782998106149