202312实战面试

1、?事件循环和变量提升。

for(var?i?=?0;?i?<=?5;?i++){
??setTimeout(()?=>{
??console.log(i)
??},?1000)
}
console.log(i)
//?先输出6、间隔一秒后输出六次6；

//?考察宏微任务、EventLoop?之类
Promise.resolve().then(()?=>?{
????console.log(0);
????return?Promise.resolve(4);
}).then((res)?=>?{
????console.log(res)
})

Promise.resolve().then(()?=>?{
????console.log(1);
}).then(()?=>?{
????console.log(2);
}).then(()?=>?{
????console.log(3);
}).then(()?=>?{
????console.log(5);
}).then(()?=>{
????console.log(6);
})
//?0、1、2、3、4、5、6

2、this指向。

function?fun(){
??console.log(this.length)
?}
let?arr?=?[fun,?1,?2]?
arr[0]();

let?fun2?=?arr[0];
fun2()
//?3、1

3、css实现九宫格，横间距15px，列间距10px

??<style>
????.grid-container?{
??????display:?flex;
??????flex-wrap:?wrap;
??????gap:?10px;?/*?列间距?*/
??????justify-content:?space-between;?/*?横向间距?*/
??????padding:?15px;?/*?外边距，用于横向间距?*/
??????box-sizing:?border-box;
????}

????.grid-item?{
??????flex:?0?0?calc(33.3333%?-?10px);?/*?三列，减去列间距?*/
??????box-sizing:?border-box;
??????background-color:?#3498db;
??????height:?0;?/*?这里的高度设置为0，由内容撑开?*/
??????padding-bottom:?calc(33.3333%?-?10px);?/*?三列，减去列间距?*/
??????position:?relative;
????}
??</style>

4、请简述?MutationObserver、IntersectionObserver、ResizeObserver

1. IntersectionObserver:?监听目标元素与其祖先或视口的交叉变化，主要用于实现懒加载等场景。
2. ResizeObserver:?监听元素的尺寸变化，当被监听元素的尺寸发生变化时，会触发回调函数。
3. MutationObserver 是?JS?中的一个接口，用于监听?DOM?树的变化。通过?MutationObserver，你可以注册回调函数，当监测的?DOM?节点或子树发生变化时，将会触发这些回调函数。这个接口的主要用途是取代过去常用的?DOM3?事件监听器的方式，提供了更灵活、更强大的?DOM?变化监测机制。
4. PerformanceObserver:?用于监控性能相关的信息，例如资源加载、用户输入延迟等。通过?PerformanceObserver?可以收集和分析网页性能数据。

5、 简述$attr、$listeners

在Vue.js中，$attr属性是一个对象，它包含了非prop绑定的特性，即父组件传给子组件的所有属性。$attrs对象是没有响应性的，即当父组件修改属性时，子组件并不会获得更新。但是，如果使用v-bind="$attrs"将$attrs绑定到子组件中，那么子组件会继承父组件的所有非prop特性，且当父组件更新这些特性时，子组件也会随之更新。

?$listeners：包含所有父组件中的 v-on 事件监听器 (不包含 .native 修饰器的) ，可以通过 v-on="$listeners" 传入内部组件。

$attr属性与$props属性的关系

在Vue.js中，$attr属性和$props属性是息息相关的。可以用$attr属性和$props属性结合，完成父组件值向子组件值的传递。

在子组件中，可以使用$props来获取通过props传递的值，使用$attrs获取通过非prop特性传递的值。如果想在子组件中获取不论是通过prop还是非prop传递的值，可以使用$props和$attrs结合。

使用$attr属性处理未知属性

在子组件中，如果使用v-bind="$attrs"将非prop特性绑定到子组件中时，会将父组件传递的所有未知属性都传递给子组件。对于未知属性，子组件会将其渲染成HTML特性，并且不会替换已有的特性。

使用$attr属性控制特性顺序

在子组件中，使用v-bind可以将$attrs属性绑定到子组件中，并控制特性的顺序。可以结合对象展开运算符与v-bind，将$attrs中的特性添加到元素的特性列表中，并控制其顺序。

$attrs属性在递归组件中的使用

在递归组件中，父组件不知道递归组件的深度，所以无法为每一层递归组件都设置一个props。在这种情况下，可以使用$attrs属性向下传递数据。