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

前言前端面试基础知识整理【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”发送请求前创建controllerconst controller new AbortController绑定请求controller.signal传给axios组件卸载时拦截在Vue的onBeforeUnmount生命周期中调用controller.abort()终止网络连接并且在axios中会抛出一个CanceledErrorconst 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还是Fetch4.defineModel有哪些属性defineModel用来简化v-model的双向绑定它的参数对象里可以配置以下属性type限制绑定的数据类型default如果没有传入v-model时提供的默认值required布尔值是否强制父组件传递该v-modelvalidator自定义校验函数除此之外defineModel还可以用来指定多个v-model属性//父组件 UserProfile v-model:nameuser.name v-model:ageuser.age v-model:phoneuser.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); // abcdefgxSet去重的范围可以去重NaN不可以去重对象ObjectSet的四种用法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 节点、甚至 NaNconst 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);