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)
-
使用可选链操作符 (?.)(推荐)
<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>
-
使用 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时添加请求头参数
-
全局默认请求头 - 在创建axios实例时通过
defaults.headers
设置,适用于所有请求共用的头信息: -
请求拦截器添加 - 在
interceptors.request.use
中动态添加,适合需要运行时确定的头信息如认证token: -
单个请求添加 - 在具体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中的结果