2023前端面试整理

1. 介绍一下最近参与的项目,负责那些业务,在开发过程中遇到过问题吗？最后是咋样处理的？

之前负责过大小十几个项目，负责过浙里办的整套上架流程，负责过数据大屏统计，后台管理系统文书生成表单生成等，浙政钉应用内嵌开发，搜索表单统一配置化，移动端form配置。遇到的问题，在一次html转pdf时，中文转出乱码的问题，最后是因为不支持中文格式，只支持英文，最后把.ttf字体引入才得以解决。

2. H5C3新特性有哪些？

本地存储比如localStorage、sessionStorage,
语义化标签，如header、footer、nav等,
flex,reba,transition,媒体查询,shadow,border-radius,渐变linear-gradient

3. vue中生命周期的理解,父子组件渲染更新卸载时组件调用顺序？

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

4. vue中数据的双向数据绑定原理？

VUE2.0通过object.defineProperty来劫持对象属性的getter和setter操作,VUE3.0通过Proxy来劫持数据

5. vue中组件通讯方式？

props,$emit,ref,Vuex,bus,LocalStorage/SessionStorage

6. vue中computed和watch的区别,使用场景？

计算属性和监听 计算是多合一 例如购物车，监听是一控制多 例如搜索框

7. vue组件中data为什么必须是一个函数？

Vue组件可以同时存在多个实例，如果直接使用对象形式的data选项，实例将会共享同一个data对象，会造成数据互相干扰的问题。设置为函数可以让每个实例都拥有自己独立的data对象。当组件被创建多次时，每个实例都会调用该函数并返回一个新的data对象

8. 对keep-alive 的了解？

当你在对组件的反复切换的时候，去复用缓存的v-node,可以提高页面的渲染效率,include ,exclude

9. vueRouter 路由钩子函数,如何进行动态路由权限管理?

var asyncRouteMenu = asyncRouetes.filter((item,index)=>{
return item.meta.roles.includes(userRole)
})
//将新路由添加到路由中, 如果不加组件component不能正确渲染
VueRouter.addRoutes(asyncRouteMenu);
//为了正确渲染导航,将对应的新的路由添加到VueRouter中

10. 介绍一下vuex，具体使用方法,在哪使用过？

state,mutations,actions-dispatch

11. vuex辅助函数有哪些,分别在哪里使用？

mapState, mapMutations, mapActions, mapGetters

12. 使用过mixins混入吗?有哪些缺点?

用过，不利于阅读，命名冲突

13. $nextTick了解吗？实现原理是什么？

可以在DOM更新完毕之后执行一个回调，简单的理解是：当数据更新了，在dom中渲染后，⾃动执⾏该函数

14. vue项目如何进行性能优化？

1.加 CDN，图片。js\css文件用cdn加载。
2.图片懒加载，按需加载。压缩图片，webpp格式的图片。组件懒加载，组件按需引入；（页面滚动之后再加载首屏下面的数据）
3.减少公共自定义组件。减少全局的混入
4.减少http请求。
5.前端、服务端开启gzip。
6.删除mock.js.
7.删除无效代码。
8.检测后端接口，性能测试。
9.使用浏览器强缓存策略。
10.延迟调用一些方法，减少js主进程（比如埋点方法。fastclick,vconsole的加载）
11.路由懒加载。
12.需要设置的样式很多时，设置className,不要设置style;减少重绘和回流；
13.避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来；要比div+css慢；
14.编码优化：缓存对象成员值，将对象成员值缓存到局部变量中会加快访问速度。（局部变量比全局变量读取快、对象嵌套的越深，读取越慢、原型链中的位置越深，读取的越慢）

15. vue中路由懒加载实现方式,组件懒加载实现方式？

const HelloWorld = （）=>import('需要加载的模块地址')

16. vue中动态渲染组件的方法？

< component :is=“item.meta.icon” />

17. 介绍vue自定义指令？

Vue.directive

18. 封装过vue公共组件吗？封装组件的思路？

一个组件无非就是我传入了什么，和你抛出了什么

19. Vue2 和vue3的区别

不允许直接使用slot
正确格式为 v-slot
将v-if当作v-for大的一个判断语句，不会相互冲突
数据双向绑定原理不同
生命周期函数钩子不同
diff算法不同

vue2 比较每一个节点，而对于一些不参与更新的元素，进行比较是有点消耗性能的。
vue3在初始化的时候会给每一个虚拟节点添加一个patchFlags，是一种优化的标识。只会比较patchFlags发生变化的节点，进行识图更新。而对于patchFlags没有变化的元素作静态标记，在渲染的时候直接复用。

20. webpack如何理解,是否自己配置过,有哪些配置？

.env文件

21. ES6新特性有哪些？

let,const,promise,()=>{},模板字符串,结构赋值，includes

22. 数组去重的方法有哪些？

[…new Set(array)]，filter()和indexOf

23. 判断对空对象方法？

Object.keys()返回空数组，JSON.stringify(data) == “{}”，for in报错

24. Call() bing() apply()的区别?

call(window,‘global’)
apply(window,[‘global’])
bind(window,‘global’)

25. 说一下原型和原型链?

原型是一个对象，是函数的一个属性prototype；比如this
每一个protoType都有一个proto，顺着proto来找对象的protoType链路就叫原型链

26. 作用域和作用域链是什么？

就是在这个范围内，变量是可以使用的，超过这个范围，变量就无法使用，这个范围就是作用域
先局部=>全局这个查找过程形成的链条叫做作用域链

27. 箭头函数和普通函数的区别？

箭头函数的this指向不能被改变，()=>{} 一个表达式时 {} return 可以省略，箭头函数没有原型

28. 说一下js 中this指向问题?

this永远指向，调用它的对象，默认指向window/全局对象。

29. 说一下闭包,有那些缺陷,用闭包处理过那些问题？

函数防抖，节流的时候会return一个函数出去

30. 说一下深拷贝浅拷贝,如何实现？

深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

31. js中如何实现跨域,在工作中怎么解决跨域问题。

协议、域名、端口 jsonp
服务器设置Access-Control-Allow-Origin将可允许的访问请求

32. 说一下对promise的理解,如何实现一个promise?

是es6新增的一个构造函数 里面放的是一个异步操作，解决了地狱回调的问题，是一种链式调动的方式

33. 说一下防抖和截流,如何在工作中实现一个防抖截流？

防抖:比如输入框的input事件，每输一个文字就会触发一次,只执行最后一次得触发
节流：游戏中的技能，释放一个技能后会有技能CD,控制多久能触发一次

34. 介绍一下微信小程序登陆流程?

小程序通过wx.login()获取登录凭证code=>通过wx.request()将code,appid ,secret发送到开发者服务器=>返回服务器自定义登录信息

35. 微信小程序如何实现与第三方进行数据交互,例如h5 ios 安卓

36. 公众号登陆

公众号 判断有没有code，有换取token,没有就获取授权
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxaf05346ece6ae430&redirect_uri=${href}&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect

判断有没有code，有换取token,没有就获取授权
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxaf05346ece6ae430&redirect_uri=${href}&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect
弹出授权类型 scope

37. vue3.2相关

组合式api
reactive 只能是对象
ref 对象，基本数据类型，数组

props 接收
<script setup lang="ts">
defineProps<{
  title?: string
  likes?: number
}>()
</script>
props 抛出
<script setup lang="ts">
const emit = defineEmits<{
  (e: &apos;change&apos;, id: number): void
  (e: &apos;update&apos;, value: string): void
}>()
</script>

计算属性没什么变化
const double = computed(() => count.value * 2)

watch(() => data.name, (newVal, oldVal)=> {
  console.log(&apos;watch监听data.name的变化 newVal ------>&apos;, newVal);
  console.log(&apos;watch监听data.name的变化 oldVal ------>&apos;, oldVal);
});

view icon text 

38. uni相关

页面的生命周期
1.onInit——监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad

2.onLoad——监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例

3.onShow——监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面

4.onReady——监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发

5.onHide——监听页面隐藏

6.onUnload——监听页面卸载

7.onResize——监听窗口尺寸变化
页面跳转
uni.navigateTo({url: “/路径?参数=参数值”}) 只能打开非 tabBar 页面
uni.switchTab 只能打开 tabBar 页面

39. 在浏览器地址栏中输入地址后浏览器发生了什么？

DNS查询-把域名转换为ip
TCP连接-三次握手
发送HTTP请求
服务器处理HTTP请求
浏览器解析并渲染页面