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中的结果