当前位置：首页 > news >正文

前端面试基础知识整理【Day-11】

news 2026/3/26 22:28:08

前言

前端面试基础知识整理【Day-1】-CSDN博客

前端面试基础知识整理【Day-2】-CSDN博客

前端面试基础知识整理【Day-3】-CSDN博客

前端面试基础知识整理【Day-4】-CSDN博客

前端面试基础知识整理【Day-5】-CSDN博客

前端面试基础知识整理【Day-6】-CSDN博客

前端面试基础知识整理【Day-7】-CSDN博客

前端面试基础知识整理【Day-8】-CSDN博客

前端面试基础知识整理【Day-9】-CSDN博客

前端面试基础知识整理【Day-10】-CSDN博客

Vue篇

1.从A页面切换到B页面，如何中断A页面中的请求

当用户从A页面跳转到B页面时，如果此时A页面有大量请求占用，会浪费用户带宽，还有可能在B页面弹出一个A页面的报错弹窗。

解决方法是用“AbortController”

发送请求前，创建controller：const controller = new AbortController
绑定请求：controller.signal传给axios
组件卸载时拦截：在Vue的onBeforeUnmount生命周期中，调用controller.abort()终止网络连接，并且在axios中会抛出一个CanceledError

const controller = new AbortController() const fetchHeavyData = async () => { try { const res = await axios.get('https://api.example.com/heavy-data', { signal: controller.signal }) data.value = res.data } catch (error) { if (axios.isCancel(error)) { console.log('请求已中断：用户切走了页面，不必大惊小怪') } else { console.error('这才是真正的网络故障或接口 500 报错:', error) } } } fetchHeavyData() onBeforeUnmount(() => { controller.abort('组件卸载，主动掐断请求') })

2.Vue根组件可以有多个根标签吗

Vue2：不可以
Vue3：可以，Vue3引入了Fragment机制，支持多个根节点
产生的问题：会导致透传属性（$attrs）失败或警告，当父组件给子组件传一个class、style、@click，并且子组件没有用props或emits接收时，Vue3默认会把这些属性挂载到子组件的根节点上，如果有多个根节点，Vue就不知道应该挂载给谁，就会抛出警告。
解决方法：在模版中手动用v-bind="$attrs"明确绑定

3.axios是基于Fetch还是XHR封装的？

axios是基于XMLHttpRequest(XHR)封装的，不过从axios17.0开始，官方引入了Fetch，允许用户选择底层方法是XHR还是Fetch

4.defineModel有哪些属性

defineModel用来简化v-model的双向绑定，它的参数对象里可以配置以下属性：

type：限制绑定的数据类型
default：如果没有传入v-model时，提供的默认值
required：布尔值，是否强制父组件传递该v-model
validator：自定义校验函数

除此之外，defineModel还可以用来指定多个v-model属性：

//父组件： <UserProfile v-model:name="user.name" v-model:age="user.age" v-model:phone="user.phone" /> //子组件： const name = defineModel('name') const age = defineModel('age', { type: Number }) const phone = defineModel('phone')

Git篇

提交代码时遇见冲突如何解决

如果当前有正在编辑的草稿（未add/commit），那么先用git stash将草稿缓存
接着执行git pull --rebase将远端代码拉取下来，此时会产生冲突，并解决冲突
当前文件的冲突解决完后，继续执行git add . 和git rebase --continue，解决下一个文件的冲突，直到git rebase --continue没有新的冲突了
执行git push
执行git stash pop弹出草稿

代码篇

1.new Set()

Set()自带去重，因此Set()常用来去重，下面是数组去重：

const arr = [1, 1, 2, 3, 4, 5, 6]; const newArr = [...new Set(arr)]; console.log(newArr);

字符串查重：

const string = "aaabbbccccddefdgcx"; const newArr = [...new Set(string)].join(''); console.log(newArr); // abcdefgx

Set去重的范围：

可以去重NaN
不可以去重对象（Object）

Set的四种用法：

const set = new Set(); // 增加,自动去重 set.add(1); set.add(1); set.add(2); console.log('now, set:', set); // 判断set的长度 console.log('set length is:', set.size); // 判断set是否有某个值 if(set.has(1)) { console.log("set有1"); } // 删除 set.delete(1); console.log('now, set:', set); // 清空 set.clear(); console.log('now, set:', set);

结果：

2.new Map()

JS里的对象只能存储字符串、数字、Symbol，但是Map可以存储任何数据类型（数组、函数、对象、DOM 节点、甚至 NaN）

const myMap = new Map(); const btnElement = document.getElementById('my-btn'); const userObj = { id: 1, name: '张三' }; // 🟢 增：set(key, value) myMap.set(btnElement, '这是按钮的附加数据'); myMap.set(userObj, { role: 'admin', active: true }); // 🔵 查：get(key) console.log(myMap.get(btnElement)); console.log(myMap.get(userObj).role); // 查询没有的值返回undefined console.log(myMap.get("test")); // 🟠 判存与大小：has() 和 size console.log(myMap.has(userObj)); console.log(myMap.size);

查看全文

http://www.jsqmd.com/news/489393/