vue前端面试题——记录一次面试当中遇到的题(1)

1.v-if和v-show的区别

v-if和v-show都是Vue中用于条件渲染的指令,但它们的实现机制和适用场景有所不同:

v-if是真正的条件渲染,在条件切换时会销毁和重建DOM元素,适合运行时条件变化不频繁的场景;

v-show只是通过CSS的display属性控制显示/隐藏,元素始终存在于DOM中,适合需要频繁切换的场景;

从性能角度考虑,频繁切换时使用v-show,减少DOM操作开销;条件很少变化时使用v-if,减少初始渲染开销。

在实际项目中,我会根据具体场景选择:比如选项卡内容切换用v-show,权限控制显示/隐藏用v-if。

2.es6新特性:

(1)const 与 let 变量

(2)模板字符串——``

(3)字符串新增的一些方法

includes——查看字符串中是否包含某些字符

(4)箭头函数

(5)拓展运算符——...

(6)数组新增方法

for of——遍历数字下标的数组或类数组对象

find —— 会将数组的每一个元素放入到函数中进行迭代处理 将第一个满足条件的值取出来

findIndex ——会将数组的每一个元素放入到函数中进行迭代处理 将第一个满足条件的值的键取出来

(7)class类

(8)getter 是一种获得属性值的方法,setter是一种设置属性值的方法。

一定注意,他们针对的是类的属性,并不是方法。

(9)promise——表示一个尚未完成但是最终会完成的操作的对象。主要有三种状态: pengding: 初始状态,既不是成功也不是失败 Fullfilled: 表示操作执行成功 Rejected: 表示操作失败

promise中的一系列方法: then: 注册回调函数用于处理promise返回成功的结果 catch: 注册回调函数用于处理promise失败的结果 finally: 无论promise执行的结果是成功还是失败,都会执行finally中的结果

promise还支持链式调用,可以连续的调用then,catch和finally promise.all()会等待所有的promise执行完毕后再去执行后续操作,如果有任何一个promise执行失败都会拒绝并且会在catch中返回第一个被拒绝的原因

(10)Map/Set

Map: 是一种集合类型,可以用于存储任意类型的键值对,与js中的普通的对象不同的是,Map中的键可以是任意类型的数据,甚至可以是对象。

Set: set也是一种集合类型,存储唯一值,它与Map的区别在于Set中不存储键,只存储值

(11)Symbol 是一种新的原始数据类型,它主要用于创建唯一的键名,特别是在对象属性和某些场景下的标识符上。Symbol 的设计目的是解决一些传统键名(如字符串键名)可能带来的问题,比如键名冲突等。多用于给元素创建属性使用

3.销毁组件需要用哪个生命周期

在Vue中,组件销毁时会依次触发beforeDestroy和destroyed两个生命周期钩子。beforeDestroy阶段适合执行清理操作,如清除定时器、取消事件监听等,此时组件实例仍然可用;destroyed阶段表示组件已完全销毁,所有绑定和子实例都已被移除。在Vue 3中它们分别更名为beforeUnmount和unmounted。

补充:生命周期

(1)vue2生命周期

beforeCreate 组件实例被创建之初,组件的属性生效之前 created 组件实例已经完全创建,属性也绑定,但真实 dom 还没有生成,$el 还不可用 beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用 mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子【可多次调用】 beforeUpdate 组件数据更新之前调用,发生在虚拟 DOM 打补丁之前,即在重新渲染之前进行最后的准备工作 updated 组件数据更新之后,重新渲染完成后。此阶段表示Vue实例已经完成了数据更新,并已经重新渲染到DOM beforeDestory 组件销毁前调用,此阶段用于清理工作,如移除事件监听器或取消定时器。 destoryed 组件销毁后调用,此阶段表示Vue实例已经完全销毁,所有的事件监听器和组件实例都已被移除。 activited keep-alive 专属,组件被激活时调用 deadctivated keep-alive 专属,组件被销毁时调用

(2)vue3生命周期

setup() 始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method onBeforeMount() 组件挂载到节点上之前执行的函数 onMounted() : 组件挂载完成后执行的函数 onBeforeUpdate() 组件更新之前执行的函数 onUpdated(): 组件更新完成之后执行的函数 onBeforeUnmount() 组件卸载之前执行的函数 onUnmounted(): 组件卸载完成后执行的函数 onActivated() 被包含在 中的组件,会多出两个生命周期钩子函数,被激活时执行; onDeactivated() 比如从 A 组件,切换到 B 组件,A 组件消失时执行; onErrorCaptured() 当捕获一个来自子孙组件的异常时激活钩子函数。

(3)uniapp生命周期

1、应用程序的生命周期方法:定义在根组件app.vue中

onLaunch() 应用程序启动 onShow() 应用程序显示 onHide() 应用程序隐藏

2、页面的生命周期方法--仿微信小程序

onLoad() 页面挂载完成 onShow() 页面被显示 onReady() 页面可以交互 onHide() 页面被隐藏 onUnload() 页面被卸载

onPageScroll() 页面发生滚动 onReachBottom() 页面滚动触底 onPullDownRefresh() 页面下拉刷新

4.在 Vue 模板中循环遍历数组对象时,如果要安全访问可能不存在的嵌套属性(如 child.name)
  1. 使用可选链操作符 (?.)(推荐)

    <script setup>
    const items = [{ id: 1, name: '父项1', child: { name: '子项1' } },{ id: 2, name: '父项2' }, // 没有child{ id: 3, name: '父项3', child: null } // child为null
    ]
    </script>
    ​
    <template><ul><li v-for="item in items" :key="item.id">{{ item.name }} - 子项: {{ item.child?.name || '无子项' }}</li></ul>
    </template>

  2. 使用 v-if 条件判断

5.vue3当中ref和reactive的区别

"Vue3中ref和reactive都是创建响应式数据的API,但有以下关键区别:

ref适用于所有类型,需要通过.value访问,而reactive仅适用于对象且直接访问属性;

ref在模板中自动解包,reactive保持原样访问;

ref可以重新赋值整个对象,reactive不能直接替换;

reactive解构会失去响应性,需要用toRefs转换;

底层实现上ref使用getter/setter,reactive使用Proxy。

实际开发中,基本类型多用ref,复杂对象状态多用reactive,也可以组合使用。"

6.在Vue中封装Axios时添加请求头参数
  1. 全局默认请求头 - 在创建axios实例时通过defaults.headers设置,适用于所有请求共用的头信息:

  2. 请求拦截器添加 - 在interceptors.request.use中动态添加,适合需要运行时确定的头信息如认证token:

  3. 单个请求添加 - 在具体API调用时传入headers,适用于特殊接口的特殊头信息:

7.解决 img 标签与 input 之间的神秘空隙问题

方法 1:修改 img 的 vertical-align

方法 2:设置父元素的 font-size 为 0

方法 3:使用 flex 布局(推荐)

方法 4:浮动布局

方法 5:负 margin 调整(应急方案)

8.Vuex和‌‌Pinia‌的区别

Vuex和Pinia都是Vue的状态管理库,但Pinia是更现代的解决方案,主要区别在于:

API设计:Pinia采用组合式API风格,比Vuex的选项式API更简洁

类型支持:Pinia提供一流的TypeScript支持,无需额外配置

模块系统:Pinia使用扁平化store设计,比Vuex的嵌套模块更直观

体积大小:Pinia比Vuex更轻量

架构简化:Pinia合并了mutations和actions,减少了概念复杂度

9.在微信小程序开发中遇到回调报错或未收到回调时,怎么解决?

1.先检查基础配置

  • 确认小程序后台的服务器域名配置好了

  • 检查微信支付/云开发等平台的回调地址有没有填错

  • 测试下网络是不是通的

2.代码里加保险

  • 所有回调都加上错误处理,比如:

javascript
wx.request({success(){...},fail(){ // 记录错误日志// 尝试重新发送}
})
  • 重要的操作(比如支付)会在前端做个定时检查,如果5秒没收到回调,就主动去查询状态

3.服务端做防护

  • 防止重复处理(比如支付成功了但回调了多次)

  • 加个日志系统,记录每次回调的情况

4.上线后继续观察

  • 看监控数据,如果发现某些回调经常失败,就针对性优化

  • 把常见问题的解决方法整理成文档,方便团队参考

10.promise当中then、catch、finally的区别

then: 注册回调函数用于处理promise返回成功的结果 catch: 注册回调函数用于处理promise失败的结果 finally: 无论promise执行的结果是成功还是失败,都会执行finally中的结果

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

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

相关文章

【QT面试题】(三)

文章目录 Qt信号槽的优点及缺点Qt中的文件流和数据流区别&#xff1f;Qt中show和exec区别QT多线程使用的方法 (4种)QString与基本数据类型如何转换&#xff1f;QT保证多线程安全事件与信号的区别connect函数的连接方式&#xff1f;信号与槽的多种用法Qt的事件过滤器有哪些同步和…

Vscode下Go语言环境配置

前言 本文介绍了vscode下Go语言开发环境的快速配置&#xff0c;为新手小白快速上手Go语言提供帮助。 1.下载官方Vscode 这步比较基础&#xff0c;已经安装好的同学可以直接快进到第二步 官方安装包地址&#xff1a;https://code.visualstudio.com/ 双击一直点击下一步即可,记…

HTML 文本省略号

目录 HTML 文本省略号超行省略号如何实现1. 单行文本溢出显示省略号2. 多行文本溢出显示省略号方法一&#xff1a;使用 -webkit-line-clamp&#xff08;推荐&#xff09;方法二&#xff1a;使用伪元素&#xff08;兼容性好&#xff09;方法三&#xff1a;使用 JavaScript 动态监…

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…

ffmpeg 新版本转码设置帧率上限

ffmpeg 新版本转码设置帧率上限 ffmpeg 在老版本比如 4.3的时候&#xff0c;转码设置帧率上限是通过vsync控制 # 设置动态控制最大帧率60 "-vsync 2 -r 60" 新版本这个参数没办法动态判断控制帧率了 替换为使用filter中的fps进行设置 # 设置动态帧率最大60帧 -…

Qt绘制电池图标源码分享

一、效果展示 二、源码分享 cell.h #ifndef CELL_WIDGET_H #define CELL_WIDGET_H #include <QWidget> #include <QPainter> #include <QPaintEngine> #include <QPaintEvent>/* 电池控件类 */ class CellWidget : public QWidget {Q_OBJECTQ_PROPERTY…

安卓基础(生成APK)

​​生成调试版&#xff08;Debug&#xff09;​​ Build → Build Bundle(s)/APK(s) → Build APK输出路径&#xff1a;app/build/outputs/apk/debug/app-debug.apk ​​生成发布版&#xff08;Release&#xff09;​​ Build → Generate Signed Bundle/APK → 选择 ​​APK​…

如何在 TypeScript 中使用类型保护

前言 类型保护是一种 TypeScript 技术&#xff0c;用于获取变量类型的信息&#xff0c;通常用于条件块中。类型保护是返回布尔值的常规函数​​&#xff0c;它接受一个类型并告知 TypeScript 是否可以将其缩小到更具体的值。类型保护具有独特的属性&#xff0c;可以根据返回的…

山东大学软件学院项目实训-基于大模型的模拟面试系统-面试对话标题自动总结

面试对话标题自动总结 主要实现思路&#xff1a;每当AI回复用户之后&#xff0c;调用方法查看当前对话是否大于三条&#xff0c;如果大于则将用户的两条和AI回复的一条对话传给DeepSeek让其进行总结&#xff08;后端&#xff09;&#xff0c;总结后调用updateChatTopic进行更新…

Spring Cloud与Alibaba微服务架构全解析

Spring Cloud与Spring Cloud Alibaba微服务架构解析 1. Spring Boot概念 Spring Boot并不是新技术&#xff0c;而是基于Spring框架下“约定优于配置”理念的产物。它帮助开发者更容易、更快速地创建独立运行和产品级别的基于Spring框架的应用。Spring Boot中并没有引入新技术…

AI 赋能 Java 开发:从通宵达旦到高效交付的蜕变之路

作为一名深耕 Java 开发领域多年的从业者&#xff0c;相信很多同行都与我有过相似的经历&#xff1a;在 “996” 甚至 “007” 的高压模式下&#xff0c;被反复修改的需求、复杂的架构设计、无休止的代码编写&#xff0c;以及部署时层出不穷的问题折磨得疲惫不堪。长期以来&…

06. C#入门系列【自定义类型】:从青铜到王者的进阶之路

C#入门系列【自定义类型】&#xff1a;从青铜到王者的进阶之路 一、引言&#xff1a;为什么需要自定义类型&#xff1f; 在C#的世界里&#xff0c;系统自带的类型&#xff08;如int、string、bool&#xff09;就像是基础武器&#xff0c;能解决一些简单问题。但当你面对复杂的…

使用 PyTorch 和 TensorBoard 实时可视化模型训练

在这个教程中&#xff0c;我们将使用 PyTorch 训练一个简单的多层感知机&#xff08;MLP&#xff09;模型来解决 MNIST 手写数字分类问题&#xff0c;并且使用 TensorBoard 来可视化训练过程中的不同信息&#xff0c;如损失、准确度、图像、参数分布和学习率变化。 步骤 1&…

第十五章 15.OSPF(CCNA)

第十五章 15.OSPF(CCNA) 介绍了大家都能用的OSPF动态路由协议 注释&#xff1a; 学习资源是B站的CCNA by Sean_Ning CCNA 最新CCNA 200-301 视频教程(含免费实验环境&#xff09; PS&#xff1a;喜欢的可以去买下他的课程&#xff0c;不贵&#xff0c;讲的很细 To be cont…

手机连接windows遇到的问题及解决方法

文章目录 写在前面一、手机与windows 连接以后 无法在win端打开手机屏幕,提示801方法零、检查连接方法一、系统修复方法二、断开重连方法三、软件更新方法四、关闭防火墙 写在前面 本文主要记录所遇到的问题以及解决方案&#xff0c;以备后用。 所用机型&#xff1a;win11 专业…

Spring Boot + MyBatis Plus 项目中,entity和 XML 映射文件的查找机制

在 Spring Boot MyBatis - Plus 项目中&#xff0c;entity&#xff08;实体类&#xff09;和 XML 映射文件的查找机制有其默认规则&#xff0c;也可通过配置调整&#xff0c;以下详细说明&#xff1a; 一、实体类&#xff08;entity&#xff09;的查找 MyBatis - Plus 能找到…

itvbox绿豆影视tvbox手机版影视APP源码分享搭建教程

我们先来看看今天的主题&#xff0c;tvbox手机版&#xff0c;然后再看看如何搭建&#xff1a; 很多爱好者都希望搭建自己的影视平台&#xff0c;那该如何搭建呢&#xff1f; 后端开发环境&#xff1a; 1.易如意后台管理优化版源码&#xff1b; 2.宝塔面板&#xff1b; 3.ph…

Vue Electron 使用来给若依系统打包成exe程序,出现登录成功但是不跳转页面(已解决)

描述 用vue打成electron可执行exe程序时&#xff0c;发现个问题&#xff0c;一直登录之后&#xff0c;页面跳转不了&#xff0c;其实后台请求已成功发送 那么怀疑就是vue页面跳转的事情 解决 大部分vue 前段项目 会使用 js-cookie 这个库 来操作浏览器的cookie 然而这个库 …

Blob设置type为application/msword将document DOM节点转换为Word(.doc,.docx),并下载到本地

core code // 导出为Word文档downloadWord({ dom, fileName "", fileType "doc", l {} } {}) {l.show && l.show();// 获取HTML内容const content dom.innerHTML;// 构建Word文档的HTML结构const html <!DOCTYPE html><html>&l…

无需 Mac,使用Appuploader简化iOS上架流程

作为开发者&#xff0c;尤其是从事跨平台开发的团队&#xff0c;iOS应用上架一直是一项繁琐且挑战重重的工作。尽管Flutter、React Native等框架使得我们可以在不同平台之间共享代码&#xff0c;iOS上架仍然是一个不可忽视的难题。因为它不仅仅涉及代码构建&#xff0c;还涉及到…