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?: stringlikes?: 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请求
浏览器解析并渲染页面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/124536.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

树莓派4B安装ffmpeg

环境&#xff1a; piraspberrypi:~/x264 $ lsb_release -aNo LSB modules are available.Distributor ID: RaspbianDescription: Raspbian GNU/Linux 10 (buster)Release: 10Codename: buster 装H264 git clone --depth 1 https://code.videolan.org/video…

c++拷贝构造与赋值运算符重载

目录 目录&#xff1a; 1&#xff1a;拷贝构造 2&#xff1a;赋值运算符重载 前言&#xff1a;在上一章我们已经学习过了&#xff0c;构造与析构这两个默认成员函数了&#xff0c;接下来让我们一起来学习另外两个重要的默认成员函数。 首先让我们来讲一下默认成员函数这个概念…

【ARM Trace32(劳特巴赫) 使用介绍 2 -- Trace32 cmm 脚本基本语法及常用命令】

文章目录 Trace32 CMM 概述1.1 Trace32 系统命令 SYStem1.1.1 Trace32 SYStem.CONFIG1.1.2 SYStem.MemAccess1.1.3 SYStem.Mode1.1.3.1 TRST-Resets the JTAG TAP controller and the CPU internal debug logic1.1.3.2 SRST- Resets the CPU core and peripherals 1.2 Trace32 …

Azure - 自动化机器学习AutoML Azure使用详解

目录 一、AutoML是如何工作的&#xff1f;二、何时考虑AutoML&#xff1f;三、AutoML助力训练与集成过程四、实战案例五、总结 自动化机器学习&#xff0c;简称为AutoML&#xff0c;旨在将机器学习模型的开发中繁琐且重复的任务自动化。这使得数据科学家、分析师以及开发人员能…

ThinkPad电脑HDMI接口失灵如何解决?

ThinkPad电脑HDMI接口失灵如何解决&#xff1f; 如果平时正常使用的外接显示器&#xff0c;某天突然无法使用了&#xff0c;重新插拔依然无信号的话&#xff0c;可以打开系统的设备管理器&#xff08;快捷键winx&#xff09;&#xff0c;首先看一下监视器的识别情况&#xff0c…

Vue3.0组件的生命周期

每个Vue 组件实例在创建时都需要经历一系列的初始化步骤&#xff0c;比如设置好数据侦听&#xff0c;编译模板&#xff0c;挂载实例到DOM&#xff0c;以及在数据改变时更新 DOM。在此过程中&#xff0c;它也会运行被称为生命周期钩子的函数&#xff0c;让开发者有机会在特定阶段…

Istio 实战

文章目录 Istio流量管理分享会【1】什么是istio?【2】istio 可以干什么?【3】业务中的痛点?【4】istio 高级流量管理5.1 istio 组件介绍与原理5.2 sidercar何时注入?如何控制是否注入?5.3 查看sidecar 容器插入的容器中的iptablesDestination RuleVirtual ServiceGateways…

使用es实现轻量级分布式锁

文章目录 [toc] 1.前言2.实现3.总结 1.前言 一般来说&#xff0c;实现分布式锁的方式有哪几种&#xff1f; 一&#xff1a;Redisson实现 二&#xff1a;ZK实现 这两种实现网上的实现是千篇一律&#xff0c;在本文就不做过多的讲解了 其它方式好像没有了&#xff0c;真的是这…

Camtasia Mac 2023版怎么给视频加字幕

在视频制作过程中&#xff0c;字幕和马赛克是两项非常常用的编辑功能&#xff0c;添加字幕可以提高观众的观看体验&#xff0c;添加马赛克可以保护视频创作者不想公开的画面内容。Camtasia作为一款知名的视频制作软件&#xff0c;在具备基本的录制和视频编辑功能的同时&#xf…

Windows11搭建kafka-python环境

文章目录 安装软件javazookeeperkafka命令行调试环境python-kafka环境参数解释名词解释定义基础架构同步发送、异步发送消息队列的两种模式消费者与消费组幂等性文件清理策略kafka消费模式offset作用kafka消费顺序如何保证参考文献安装软件 java 下载jdk,配置环境变量JAVA_H…

win10安装spark

一、进入spark下载页面 连接 Downloads | Apache Spark 二、解压下载后的.tgz文件 直接解压即可 三、运行 运行bin目录下的 spark-shell.cmd 提示 Did not find winutils.exe: java.io.FileNotFoundException: java.io.FileNotFoundException: HADOOP_HOME and hadoop.hom…

二蛋赠书六期:《Linux管理入门经典(第8版)》

前言 大家好&#xff01;我是二蛋&#xff0c;一个热爱技术、乐于分享的工程师。在过去的几年里&#xff0c;我一直通过各种渠道与大家分享技术知识和经验。我深知&#xff0c;每一位技术人员都对自己的技能提升和职业发展有着热切的期待。因此&#xff0c;我非常感激大家一直…

2023-09-09 青少年软件编程(C语言)等级考试试卷(五级)解析

2023-09-09 青少年软件编程(C语言)等级考试试卷(五级)解析T1、红与黑 有一间长方形的房子,地上铺了红色、黑色两种颜色的正方形瓷砖。你站在其中一块黑色的瓷砖上,只能向相邻的黑色瓷砖移动。请写一个程序,计算你总共能够到达多少块黑色的瓷砖。 时间限制:1000 内存限制…

[量化投资-学习笔记002]Python+TDengine从零开始搭建量化分析平台-MA均线的多种实现方式

MA 均线时最基本的技术指标&#xff0c;也是最简单&#xff0c;最不常用的&#xff08;通常使用EMA、SMA&#xff09;。 以下用两种不同的计算方法和两种不同的画图方法进行展示和说明。 MA 均线指标公式 MA (N)(C1 C2 C3 …C N )/N目录 方式一1.SQL 直接查询均值2.使用 pyp…

RHCE---shell脚本编程sed

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 Liunx中筛选文本时常用的命令&#xff0c;常常会被提及文本三剑客&#xff0c;前文我们学习了文本三剑客中的grep 命令&#xff0c;除了grep命令我们也常用到sed命令&#xff0c;sed命令有…

window系统修改rabbitmq 默认端口

安装完rabbitmq之后&#xff0c;默认的client端口是5672, 控制台访问端口是15672&#xff0c;rabbitmq管理工具启动之后在浏览器中输入地址&#xff1a; ​ ​http://localhost:15672/​​​ 就可以访问后台​ ​​​&#xff0c; 默认管理员账号&#xff1a;guest 密码&#x…

【0基础学Java第四课】-- 逻辑控制

4. 逻辑控制 4.1 顺序结构4.2 分支结构4.2.1 if语句判断一个数字是奇数还是偶数判断一个数字是正数&#xff0c;负数&#xff0c;还是零判断一个年份是否为闰年 4.2.2 switch 语句 4.3 while循环打印 1 - 10 的数字计算 1 - 100 的和计算 5 的阶乘计算1&#xff01;2&#xff0…

Openssl数据安全传输平台014:OCCI环境搭建和使用:Centos8-Oracle19c代码跑通 + Window代码没跑通(不影响本项目)

文章目录 0 代码仓库1 启动Centos oracle数据库2 Winsows安装配置OCCI库2.1 下载文件2.2 VS 配置2.2.1 VC包含目录2.2.2 VC库目录2.2.3 连接器-附加依赖项2.2.4 代码测试-Oracle11g2.2.4.1 准备2.2.4.2 代码测试 3 Centos安装配置occi库3.0 强调3.1 下载instantclient库文件压缩…

HTML5教程

HTML5读书笔记 jack 2023.10.24 来源&#xff1a;HTML5 Canvas | 菜鸟教程 常识&#xff1a; HTML5 是下一代 HTML 标准。 HTML , HTML 4.01的上一个版本诞生于 1999 年 <!DOCTYPE html>用于声明下面代码是H5; 浏览器支持 你可以让一些较早的浏览器&#xff08;不支…

ubuntu 安装串口工具和添加虚拟串口

目录 一、串口工具安装 二、使用Windows本身虚拟的串口 &#xff08;一&#xff09;添加串口 1、保证虚拟机是关闭状态&#xff0c;打开“虚拟机设置”&#xff0c;点击“添加”。 2、选中“串行端口”&#xff0c;点击“完成”。 3、选中刚添加的串口&#xff0c;下拉选…