web前端面试题

1：宽高固定的一个div，水平垂直居中，有几种方法

css 复制代码

1. 绝对定位 + 负 margin（传统方法）
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 宽度的一半 */
  margin-top: -50px;   /* 高度的一半 */
  width: 200px;
  height: 100px;
}
2. 绝对定位 + transform（无需手动计算）
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
}
3. 绝对定位 + margin: auto（经典四零定位）
.child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}
4：Flexbox
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  width: 200px;
  height: 100px;
}
5. Grid 布局
.parent {
  display: grid;
  place-items: center; /* 同时设置 align-items 和 justify-items */
}
.child {
  width: 200px;
  height: 100px;
}
6. 利用表格布局（display: table-cell）
.parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 500px;
  height: 500px;
}
.child {
  display: inline-block;  /* 或 inline */
  width: 200px;
  height: 100px;
  text-align: left; /* 恢复内部文字对齐 */
}

2：position的属性有哪些，区别是什么？

之后继续追问：

1：relative（/ˈrelətɪv/）（相对定位）设置偏移之后，会不会挤开旁边的元素？

2：开发过程中有没有发现：父级设置特定属性会导致position: fixed （/fɪkst/）（固定定位）的定位基准改变？

（transform（元素变化、会独立的渲染层导致的）、perspective（3D 透视效果）、filter（滤镜）、backdrop-filter（背景区域滤镜））

static（默认）
relative（相对定位）

相对于自身原本位置偏移

不脱离文档流（原位置保留，其他元素不会填补）
absolute（绝对定位）

相对于最近的非static祖先（若没有则相对于 /初始包含块）

完全脱离文档流（原位置被其他元素填充）
fixed（固定定位）

相对于视口（浏览器窗口）定位

完全脱离文档流

滚动时位置不变

注意：若祖先设置了 transform/perspective/filter 属性，会相对于该祖先而非视口
sticky（粘性定位）⚠️ 较新

不脱离文档流（原位置保留）

行为混合：未达到阈值时类似 relative；达到阈值后类似 fixed

需要设置 top/right/bottom/left 阈值才生效

受父容器边界限制（不会超出父容器）

3：margin 负值。在什么地方用

1:元素居中

2:两列/多列布局（圣杯布局、双飞翼）

3:网格间距（Grid Gap）的负 margin 解决方案

"如果让你实现一个多列布局，每列之间有固定间距，但第一列左边和最后一列右边不要间距，你会怎么做？"如果不用 Grid(/ɡrɪd/) 和 Flex(/fleks/) ，你会怎么实现？"

4: flex(/fleks/)为1的时候，子元素限制一行时内容水平溢出撑出父元素布局解决方案

解决方法：

1、在子元素的父级加overflow:hidden;

2、在子元素的父级上加width: 0;或者height:0;

5：vue2 $set 什么时候需要用？为什么会有$ set,vue3还需不需要?

需要给响应式对象动态添加新属性，或通过索引修改数组元素时，Vue 2 无法自动侦测到变化，必须使用 $set。

根本原因：Vue 2 响应式系统的限制

Vue 2 使用 Object.defineProperty 实现响应式，它有两个先天缺陷：

1:无法检测属性添加/删除

2:无法检测数组索引修改

3:无法检测数组长度修改

Vue 3 不需要！Vue 3 使用 Proxy 替代了 Object.defineProperty

6：vue $nextTick什么时候用

1: 在数据变化后执行的某个操作，而这个操作需要使用随数据变化而变化的DOM结构的时候，这个操作就需要方法在nextTick()的回调函数中。

2:在vue生命周期中，如果在created()钩子进行DOM操作，也一定要放在nextTick()的回调函数中。

7、vue 组件通信有哪几种方式？

vue3: ： $children 和$ listeners 已移除，EventBus 需用 mitt 替代。

用vue-Bus（事件总线）或者mitt 有什么需要注意的地方吗？？

1：组件销毁时，必须手动off掉事件监听，否则内存无法释放、

2：匿名函数无法 off，但是可以通过EventBus.$off('event')全部移除

3：多个组件监听同一事件时，触发顺序等于注册顺序，但注册顺序往往不可控

8、vue 从A路由跳转到B路由，路由守卫的执行顺序

复制代码

		1. PageA 组件内守卫 beforeRouteLeave
		2. 全局前置守卫 beforeEach
		3. PageB路由独享守卫 beforeEnter
		4. PageB 组件内守卫 beforeRouteEnter
		5. 全局解析守卫 beforeResolve
		6. 全局后置钩子 afterEach
		7. PageB beforeRouteEnter 回调 (组件已创建，可访问 this)

9、图表大屏，怎么兼容不同分辨率的问题

1：rem/vw + flex 相对于视口单位

2：transform: scale 整体等比缩放

3：vw/vh 混合布局

4：flex + grid + 百分比弹性布局

5：ECharts 关键配置 // 监听窗口变化

6：postcss-px2rem px转rem插件核心就是两步：先让插件帮我们把代码里的 px 自动转换成 rem，再通过一段 JavaScript 代码根据屏幕宽度动态设置根节点的 font-size

10、 vue项目调打印机功能，有没有做过？怎么实现的？使用过程中有没有遇到什么问题？

实现方法：

1：首选原生方案直接用 window.print() + @media print

2：掉插件 vue-print-nb （/prɪnt/）

主要问题：

1：打印内容和屏幕显示不一致（比如布局错乱，颜色丢失等）

分页失控：内容被拦腰截断

3：异步数据问题：内容还没加载完就打印了

4：Canvas/图表打印模糊

5：跨浏览器兼容

11、微信小程序中有一个这样的场景：App.js 里异步获取 token，首页 index.js 里有多个查询接口需要这个 token。但因为 token 还没拿到，查询接口直接报了 401，这种有什么解决办法？

不要在每个页面单独判断Token，而是建立一个统一的请求拦截机制。

1：原子化：保证同时只有一个登录/刷新Token的请求在后台进行。

2：队列化：在Token拿到之前，所有请求都不发出去，而是存入队列；Token拿到后，批量消费队列。

1：维护一个等待队列，所有需要 token 的请求先不发送

2：等待 token 获取完成后，统一消费队列，发送真正的请求

3：后续请求直接使用已缓存的 token

12、有没有使用过高德地图api或者其他地图？开发中有没有遇到过什么问题？地图卡顿没有什么优化办法？

1：使用海量点标记（MassMarks）

2：地图里面的工具类，不能定义在data中

3：页面销毁时调用 map.destroy() 释放地图实例，避免内存泄漏。