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属性向下传递数据。

相关推荐
熊猫比分管理员5 分钟前
【全栈源码解决方案】Vue+Java四端齐全,一周交付可运行项目!
java·前端·vue.js
o***74177 分钟前
【Nginx 】Nginx 部署前端 vue 项目
前端·vue.js·nginx
坚持就完事了7 分钟前
CSS-5:盒子模型
前端·css·html
一 乐7 分钟前
考公|考务考试|基于SprinBoot+vue的考公在线考试系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·课程设计
吃饺子不吃馅8 分钟前
优化:如何避免 React Context 引起的全局挂载节点树重新渲染
前端·面试·github
q***721910 分钟前
Y20030018基于Java+Springboot+mysql+jsp+layui的家政服务系统的设计与实现 源代码 文档
android·前端·后端
林太白33 分钟前
跟着TRAE SOLO全链路看看项目部署服务器全流程吧
前端·javascript·后端
特级业务专家33 分钟前
把 16MB 中文字体压到 400KB:我写了一个 Vite 字体子集插件
javascript·vue.js·vite
humor40 分钟前
Quill 2.x 从 0 到 1 实战 - 为 AI+Quill 深度结合铺路
前端·vue.js
先生沉默先1 小时前
NodeJs 学习日志(8):雪花算法生成唯一 ID
javascript·学习·node.js