面试被狠狠地拷打了怎麽办，复盘面试中的问题真的很有意义

Virtual09
1,948 阅读6分钟

前言

      近日我可谓是初生牛犊不怕虎，硬着头皮就是面试。说实话自己面的不尽人意，很多地方都是云里雾里，但是面试官大大提出的问题也都是非常有意义的问题，本文我们来看看这些非常有意思的问题吧.

正文

1. 知道margin 和 padding?

第一问面试官大大肯定是试试水问问的，这里我就从css盒子模型介绍了. css盒子模型分为两种第一种是标准盒子模型

image.png

对于标准盒子模型而言盒子的宽度会等于：width = content

第二种就是IE盒子模型,也称之为怪异盒子模型

image.png

对于IE盒子模型:width = content + padding + border.在我们日常开发过程中，我们可以添加属性box-sizing:content-box将IE变成标准.

什么情况使用标砖盒子，什么时候使用怪异盒子模型呢？

标准盒子: 当需要精确控制元素大小时

IE盒子： 当需要确保元素的显示宽度固定不变时也就是无论paddinf或border如何变化，元素的可视高度保持一致，可以考虑使用IE盒子模型

2.水平垂直居中

已知父子容器宽高

我们可以直接使用margin,计算子容器需要上下左右偏移的距离就好了

未知父容器，已知子容器

  1. margin + calc()
  2. position + margin(负值)

未知父子容器高度

  1. position + transform
  2. flex + align-items + justify-content
  3. grid + align-item + justify-content
  4. table-cell + vertical-align:middle + text-align:center

3.数组的遍历方法

  1. for循环
  2. forEach()
  3. map()
  4. reduce
  5. every()
  6. some()
  7. filter()

了解过reduce嘛

reduce()的是一个比较特殊的遍历方法，接收一个回调函数，一个初始默认值

let sum = arr.reduce((pre,item,i,arr)=>{ return pre + item },0)

这里初始默认值是给pre的，然后这里return pre + item会把值返回给下一次的pre，也可以这么理解，数组里面的值求和，每一次我们遍历到一个元素，就会做一次求和的操作。

4.computed watch

computed 计算属性会依赖于其计算的属性值，computed任意依赖项的变化都会重新执行该函数。计算属性有缓存，多次重复计算属性时会从缓存中获取返回值，计算属性必须return返回值

watch 监听到某一个数据的变化从而触发函数，当数据是对象类型的时候，那么就需要使用深度监听deep对象中的属性。由于页面第一次加载，此时没有数据加载，watch就不会触发，这里我们就要使用立即执行immdiate属性，让watch执行

5.v-if 和 v-show

简单来说v-if是对DOM树节点进行增加和删除,v-show是通过设置display:none这个属性来控制的。 v-if的性能消耗会大于v-show，如果需要频繁让组件或者页面出现消失，一般使用v-show。

6.Vue中的nextTick

nextTick是一个等待下一次DOM更新的刷新工具，在Vue官方文档中是这样介绍的

当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。 nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise

7.组件通信

父子组件通信 父传子,通过props，子传父通过emit发布订阅机制

兄弟组件通讯 可以借助pinia和vuex

跨层级组件通信 全局事件总线EvnetBus

EventBus（事件总线）是一种在 Vue.js 应用中实现组件间通信的方法之一。它通常用于非父子关系的组件之间通信，例如兄弟组件、跨级组件或者是完全不相关的组件之间的消息传递。EventBus 实质上是一个全局的 Vue 实例，可以用来触发和监听事件。

8.Event Loop

在事件循环(Event Loop)中，当主线程执行完了当前的同步任务之后，就会开始检查队列中是否有待处理的事件，如果有，则主线程就会将待处理的事件取出并执行对应的回调函数，这个过程就是时间循环。而这一过程是由主线程和任务队列组成的，同步任务会在主线程中执行，而任务队列用于处理异步任务.

同步任务 同步任务是指按照顺序执行的任务，会阻塞其他任务的执行，直到当前任务执行完毕。

异步任务 异步任务是指那些不会立即执行，而是会等待未来某个时刻执行的任务，这些任务不会阻塞主线程的执行，允许执行其他任务

宏任务

  1. setTimeout(),setInterval()

  2. I/O操作

  3. UI渲染

  4. Web Workers

微任务

  1. Promise回调

  2. MutationObserver

  3. process.nextTick（Node.js 中特有）

宏任务 微任务 DOM操作的执行顺序
  1. 宏任务:

宏任务是事件循环中的主要执行单元。一个宏任务完成后，事件循环会检查微任务队列，然后检查是否有新的宏任务需要执行。

宏任务包括：脚本执行、定时器（如 setTimeout）、I/O 操作、用户事件（如点击事件）、UI 渲染等。

  1. 微任务:

    微任务在当前宏任务执行完毕后立即执行，但在下一个宏任务执行之前。

    微任务包括：Promise 回调、MutationObserver、process.nextTick（Node.js 中特有）等。

  2. DOM 操作:

    DOM 操作通常发生在宏任务中，例如在事件处理器中或者在脚本执行过程中对DOM进行修改。

    在某些情况下，DOM 操作也可以由微任务触发，例如通过 Promise 的解析结果来修改 DOM。

9. 移动端运行Pc端的项目，如何保证项目效果正常显示

1. 媒体查询（Media Queries） 使用媒体查询来根据不同的设备屏幕尺寸应用不同的样式规则

/* 默认样式 */
body{
    font-size:16px
}

/* 移动端设备*/
@media (max-width:750px){
    body{
        font-size:14px
    }
}

使用rem 使用rem,不同的浏览器的跟字体大小都不同，而rem相对单位，就是相对于跟字体大小的，所以我们使用rem就可以自己适配了.

文章到这里就结束了，感谢大家阅读！！

avatar
文章
阅读
粉丝