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

前言

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

javascript 复制代码

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属性：

javascript 复制代码

//父组件：
<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()常用来去重，下面是数组去重：

javascript 复制代码

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

字符串查重：

javascript 复制代码

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

Set去重的范围：

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

Set的四种用法：

javascript 复制代码

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）

javascript 复制代码

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);