2022/10/24

一面

  1. 自我介绍
  2. 聊项目，介绍项目（用户登录，axios封装，token，路由设计，动态注册菜单）

  3. vue3和vue2的区别

    • 响应式原理api的改变，vue2使用Object.defineProperty实现，而vue3通过proxy实现；前者需要通过遍历的方式修改对象的每个属性，而后者可以通过proxy代理整个对象，性能上proxy 会更加优秀
    • vue2使用options api，而vue3使用composition api；options api通过声明组件选项对象的形式编写组件，而composition api可以将一些相同逻辑的代码有效的组织起来，能够高效复用逻辑，代码更加简洁
    • vue3对diff算法进行了优化，不再向vue2一样对比所有dom，采用 block tree 的方式，此外重新渲染的算法也做了改进，利用闭包来进行缓存，提高了vue3的速度

  4. 介绍一下弹性布局

  5. 垂直三栏 ```css .box { position: relative;

}

  2. 6. 水平垂直居中
  3. ```css
  4. .box {
  5.   position: absolute;
  6.   left: 50%;
  7.   top: 50%;
  8.   width: 100px;
  9.   height: 100px;
  10.     margin-left: -50px;
  11.   margin-top: -50px;
  12. }
  1. .box {
  2.   position: absolute;
  3.   left: 50%;
  4.   top: 50%;
  5.   width: 100px;
  6.   height: 100px;
  7.     transform: translate(-50%, -50%)
  8. }
  1. .box {
  2.   position: absolute;
  3.   width: 100px;
  4.   height: 100px;
  5.     top: 0;
  6.   left: 0;
  7.   right: 0;
  8.   bottom: 0;
  9.   margin: auto;
  10. }
  1. .father {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5. }
  6. .child {
  7.   width: 100px;
  8.   height: 100px;
  9. }
  1. .father {
  2.   display: grid;
  3. }
  4. .child {
  5.   width: 100px;
  6.   height: 100px;
  7.   margin: auto;
  8. }
  1. 介绍一下BFC
  2. 回流重绘

  3. 了解哪些响应式布局？

    1. 百分比布局：通过百分比单位，使浏览器中组件的宽高随着浏览器的高度变化而变化，从而实现响应式的效果
    • 缺点：
      • 计算困难，设计完整的布局十分麻烦
      • 使用百分比容易使布局变得复杂，比如 margin 和 padding 的百分比都是相对于父元素的宽，border-radius 相对于自身因素等等
    1. flex布局：
    2. 媒体查询：可以针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会重新渲染
    • 优点：
      • 实现简单，只需要编写css代码
      • 调整屏幕宽度时不需要刷新页面就可以实现响应式布局
    • 缺点：
      • 代码量大，不方便维护
      • 不能够完全适配所有的尺寸，需要编写多套css样式
    1. 动态rem/em方案
    • 通过 js 代码动态的设置 rem 的值，从而实现响应式
    1. viewport方案
    2. scale缩放

  4. 媒体查询做响应式布局的优缺点

    • 优点：
      • 实现简单，只需要编写css代码
      • 调整屏幕宽度时不需要刷新页面就可以实现响应式布局
    • 缺点：
      • 代码量大，不方便维护
      • 不能够完全适配所有的尺寸，需要编写多套css样式

  5. 了解事件循环机制吗？

  6. 了解同源策略和跨域吗？
  7. 介绍一下常用的git操作