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

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

5、简述$attr、$listeners

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

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