前端面试整理5
目录
1.父子组件生命周期执行顺序？
3.js截取字符串方案？
4.Webpack的优化流程？
5.协商缓存和强缓存？
6.静态资源是强缓存，会不会向服务器发请求？
7.自动化构建工具vite的优势有哪些？
8.动态路由是如何解析的？
9.React中如何封装组件？流程？
10.高阶组件？使用场景？
11.Ts和js的区别？
12.如何清除浮动？
13.Ts中的枚举和元组？怎么使用？
14.组件内部前置守卫beforeRouteEnter没有this如何使用？
15.Ts的函数重载？
17.Vue的路由如何携带参数？多个参数如何携带？
18.Js的内置对象有哪些？
19.组件如何进行递归使用？
20.Promise的方法分别有哪些？分别怎么使用？
1.父子组件生命周期执行顺序？
- 父组件
beforeCreate - 父组件
created - 父组件
beforeMount - 子组件
beforeCreate - 子组件
created - 子组件
beforeMount - 子组件
mounted - 父组件
mounted - 父组件
beforeUpdate - 子组件
beforeUpdate - 子组件
updated - 父组件
updated - 父组件
beforeDestroy - 子组件
beforeDestroy - 子组件
destroyed - 父组件
destroyed
2.localstorage.sessionstorage,cookie的区别？
①存储大小：cookie不能超过4kb;sessionStorage和localStorage存储空间较大，可达到5M或更大。
②保存时间：cookie在设置的有效期内一直有效；sessionStorage在会话关闭时自动删除；localStorage永久存储，除非手动删除。
③数据与服务器的交互：cookie会主动将数据传递给服务器；sessionStorage和localStorage不会主动把数据传递给服务器，它保存在本地。
3.js截取字符串方案？
①subString();
②slice();
③subStr()。
4.Webpack的优化流程？
-
减少文件搜索范围：通过配置resolve.modules和resolve.extensions来缩小Webpack搜索模块的范围，减少文件搜索时间。
-
使用DLLPlugin：将复杂的依赖关系打包成静态资源，加快构建速度。
-
使用HappyPack：多线程处理loader，加快构建速度。
-
懒加载：尽可能地延迟模块加载，减少首次加载时间。
-
使用Tree Shaking：只打包使用到的代码，减少打包体积。
-
代码分割：将代码分割成多个小块，按需加载，提高页面加载速度。
-
使用缓存：使用HashedModuleIdsPlugin和NamedChunksPlugin来提高缓存效率。
-
优化图片：使用url-loader和image-webpack-loader来优化图片，减小打包体积。
5.协商缓存和强缓存？
协商缓存：浏览器向服务器发送请求，服务器会根据请求的参数来判断是否命中协商缓存，如果命中，则返回状态码304并带上新的响应数据通知浏览器从缓存中读取资源。
强缓存：浏览器不会像服务器发送任何请求，直接从本地缓存中读取并返回状态码200。
区别：强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本，区别只在于协商缓存会向服务器发送一次请求以此来确认是否使用缓存。它们缓存不命中时，都会向服务器发送请求来获取资源。在实际的缓存机制中，强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断，强缓存是否命中，如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。
6.静态资源是强缓存，会不会向服务器发请求？
不会，强缓存不会向服务器发送任何请求，直接从本地缓存读取数据。
7.自动化构建工具vite的优势有哪些？
①高效的开发环境：Vite使用了ES模块的引入方式，无需打包，同支持热更新和按需编译等功能。
②构建速度快：Vite 在生产环境下会将所有模块打包成一个或多个文件，以提高性能。
③功能强大：对 TypeScript、JSX、React、Vue 等支持开箱即用，可以满足不同项目的需求。
④灵活的插件机制：Vite 支持插件和加载器，可以自定义打包过程，非常灵活。
⑤高效的模块管理：Vite 将每个文件作为一个模块，通过浏览器的 HTTP/2 Server Push 功能，将需要的模块提前推送给浏览器，避免了延迟和等待时间。
8.动态路由是如何解析的？
9.React中如何封装组件？流程？
-
确定组件的功能和用途：组件的功能一定要清晰明确，方便后续使用和维护。
-
设计组件的 props：props 是组件与外界交互的接口，需要考虑组件需要哪些数据和方法，以及这些数据和方法的类型和默认值等。
-
编写组件的 JSX 模板：在组件中编写 JSX 模板，将 props 中的数据和方法渲染到模板中。
-
完成组件的逻辑：在组件中编写业务逻辑，处理用户的交互事件、数据请求等操作。
-
对组件进行测试：对组件进行测试，确保组件的功能和性能符合预期。
-
封装组件并导出：将组件封装成一个独立的文件，并导出供其他组件或应用程序使用。
10.高阶组件？使用场景？
高阶组件：如果一个函数接受一个或多个组件作为参数并返回一个组件就可称为高阶组件。
使用场景：权限控制、日志记录、数据校验、异常处理、统计上报等
11.Ts和js的区别？
①TypeScript是JavaScript的超集。
②ts代码不能直接运行，需通过预编译器编译为Js代码才可以运行。
③TypeScript是静态类语言（强类型），编译时进行类型检查；而JavaScript是动态类语言（弱类型）在运行时进行类型判断，相对更灵活。
④TypeScript在JavaScript基础类型上，增加了void、never、any、元组、枚举、以及一些高级类型，还有类、接口、命名空间与更多面向对象的内容等。
⑤JavaScript没有重载概念，TypeScript可以重载。
12.如何清除浮动？
①给父元素设置高度；
②clear：both；
③给父元素设置浮动；
④给父元素设置overflow：hidden；
⑤给父元素设置伪元素 .father::after {
content: '';
display: block;
clear: both;
}
13.Ts中的枚举和元组？怎么使用？
枚举（enum）：是对javascript标准数据类型的一种补充,可以通过属性获取值，也可以通过索引。
enum Color {
Red = 1,
Green,
Blue
}
let colorName: string = Color[2];
console.log(colorName); // 输出 'Green'元组(tuple) ：它允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
let x: [string, number];
x = ['hello', 10]; // 初始化
console.log(x[0].substring(1)); // 输出 'ello'
console.log(x[1].toFixed(2)); // 输出 '10.00'14.组件内部前置守卫beforeRouteEnter没有this如何使用？
在组件内部的前置守卫 beforeRouteEnter 中，确实没有 this，因为此时组件还没有被创建。如果需要在 beforeRouteEnter 中访问组件实例，可以通过传入回调函数的方式来实现。
beforeRouteEnter(to, from, next) {
next(vm => {
// 在这里可以访问组件实例，例如：
vm.$store.dispatch('fetchData')
})
}15.Ts的函数重载？
函数重载：根据传递参数的不同返回不同的结果。
重载分为两个部分（缺一不可）：实现和声明。
16.Vuex是什么？主要作用？解决什么问题？
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。用来解决多组件数据通信。
17.Vue的路由如何携带参数？多个参数如何携带？
路由传参可以用params或query，params传参会将参数拼接在URL上，而query则会将参数以查询参数的方式附加在URL上。
18.Js的内置对象有哪些？
JS内置对象有：Array对象、Date对象、string对象、Global对象、Math对象
19.组件如何进行递归使用？
递归组件需要声明name和自己引入自己并声明注册为组件，并且需要使用props进行传参，其还需要一个停止条件，否则会进入死循环。
{{ message }}
20.Promise的方法分别有哪些？分别怎么使用？
resolve()将现有对象转换为Promise对象
.then()：为promise实例添加状态改变时的回调函数
.catch()：用于指定发生错误时的回调函数
finally()：用于指定不管promise对象最后状态如何，都会执行的操作
all()：用于将多个promise实例包装成一个新的promise实例
race(iterable):返回一个promise，一旦迭代器中的某个promise解决或拒绝，返回的promise就会解决或者拒绝。
reject(reason)方法返回一个带有拒绝原因reason参数的Promise对象