前端面试题202601

HuYi_code
290 阅读8分钟

Vue:

1. Vue3 与 Vue2 相比的优势是什么？

  • 性能提升：
    • Vue3更快的渲染速度：
      • 在组件初始化时，使用了更快的虚拟Dom和优化过的插槽，
      • 在编译时，①静态树和静态属性提升，避免在每次渲染中，重复渲染Dom节点和重读计算属性。②在动态节点上标记需要更新的类型(Patch flag)，这样在页面渲染更新的时候，只比较动态部分，减少比较开销。③将内联事件处理函数缓存起来，避免重复创建。使得虚拟DOM的重写，更新性能显著提升。
    • 更小的体积
      • 由于依赖于ES Module（ES6模块）的静态特性，可以使用tree-shaking技术，静态分析出前端程序中的未使用代码并将其在编译阶段安全移除，只打包被使用到的功能的代码，这样可以显著减少前端编译打包后的代码体积。
  • 响应式系统重构
    • 使用Proxy代理替代了Object.defineProperty来实现响应式，这样Proxy可以拦截整个对象，而不是像Object.defineProperty只能拦截属性的get和set，这样Vue3就可以检测到对象属性的添加和删除，以及数组索引和长度的变化，从而提供更全面的响应式跟踪，同时Proxy的性能是更好的。
    • 支持Map，Set等新的数据结构。
    • 并且可以在组件外使用响应式API（ref，reactive），使得组件可以更加灵活，更好的复用
  • 组合式API的使用
    • 更好的逻辑复用，有效避免mixin的命名冲突和覆盖的问题。
    • 减少使用this，可以避免一些上下文引用问题。
    • 更完善的支持TS
  • 新增一部分组件，使得
    • Fragment
      • 一个页面中可以用多个根节点组件
    • Teleport
      • 将组件渲染到DOM的任意位置上，可以更轻松得组建自定义的下拉框，日历选择器下拉框等组件。
    • Suspense
      • 可以在异步组件加载完成之前中，替换成加载页面，相当于骨架屏。

2. 大概描述如何从 Vue2 迁移到 Vue3

3. Vue 父子组件的生命周期的钩子函数的回调顺序

  • Vue2 与 Vue3的 生命周期的钩子函数基本一致，只会有略微的区别
Vue2：
挂载阶段
父组件 beforeCreate
父组件 created
父组件 beforeMount
子组件 beforeCreate
子组件 created
子组件 beforeMount
子组件 mounted
父组件 mounted

更新阶段
父组件 beforeUpdate
子组件 beforeUpdate
子组件 updated
父组件 updated

销毁阶段
父组件 beforeDestroy
子组件 beforeDestroy
子组件 destroyed
父组件 destroyed

Vue3：

Composition API
挂在阶段
/ 父组件 setup() 开始
父组件 setup() 执行
父组件 onBeforeMount
子组件 setup() 执行
子组件 onBeforeMount
子组件 onMounted
父组件 onMounted

更新阶段
父组件 onbeforeUpdate
子组件 onbeforeUpdate
子组件 onupdated
父组件 onupdated

销毁阶段
父组件 onbeforeUnmount
子组件 onbeforeUnmount
子组件 onUnmounted
父组件 onUnmounted

Options API
挂在阶段
父组件 beforeCreate
父组件 created
父组件 beforeMount
子组件 beforeCreate
子组件 created
子组件 beforeMount
子组件 mounted
父组件 mounted

更新阶段
父组件 beforeUpdate
子组件 beforeUpdate
子组件 updated
父组件 updated

销毁阶段
父组件 beforeUnmount
子组件 beforeUnmount
子组件 onUnmounted
父组件 onUnmounted

JS:

1. JS事件循环机制

  • JavaScript 的事件循环机制是实现非阻塞异步编程的核心，它是单线程的JS能够处理并发操作的关键
    • 调用栈
      • 后进先出的数据结构
      • 用于执行上下文
      • 同步代码立即执行
    • 任务队列：
      • 宏任务队列：settimeout/setInterval, I/O操作等。
      • 微任务队列：Promise.then/catch/finally, async/await, process.nextTick(nodejs中优先级最高。)
  • 完整的事件循环流程：调用栈开始执行同步代码（可以阻塞代码） -> 清空和同步代码同一级的所有微任务(process.nextTick优先级高于Promise) -> 开始执行下一个宏任务 -> 再次清空这个宏任务同一级的所有微任务 -> 以此往复循环，直到所有事件结束。
  • async/await 本质
async function asyncFunc() {
  console.log('1');
  await Promise.resolve();
  console.log('2');
}
// 相当于：
function asyncFunc() {
  console.log('1');
  return Promise.resolve().then(() => {
    console.log('2');
  });
}
  • 宏任务和微任务的区别：
    • 微任务：每个宏任务执行完后立即执行
    • 宏任务：每次事件循环执行一个
  • 为什么要有微任务
    • 确保某些高优先级异步任务能及时执行，又不至于阻塞代码执行。

2. 原型链

  • 原型链，JS中每个对象都有一个内部链接属性（__proto__）指向它的原型对象（prototype）。当访问一个对象的属性或方法时，如果对象本身没有该属性，JS会沿着这个原型链向上找，直到找到该属性或者到达链的末尾（null）。这种通过原型层层关联形成的链状结构，就是原型链。
    • prototype:是构造函数才有的属性，指向一个对象，这个对象就是该函数创建实例对象的原型
    • __proto__: 是每个对象都有的属性，指向该对象的原型。
    • const p = new Person(); p.__proto__ === Person.prototype // true,这两个属性是相互指向的。
  • 原型链的查找机制
    • 当访问一个对象的属性或者方法的时候时，查找是否对象本身有这个属性，如果有，结束。
    • 如果没有，则沿着__proto__链向上查找其原型对象(prototype);
    • 如果没有，就查找原型的原型，直到查找到Object.prototype,如果有，结束。
    • 如果没有，就到了尽头null，然后返回undefined

image.png

3. 对TS的泛型与接口的理解

4. 如何判断一个数据时数组类型

  • Array.isArray(arr) 比较推荐 最直接和最准确的方法
  • arr instanceof Array
  • Object.prototype.toString.call(arr) 这种方法的好处是可以判断出所有类型的对象，而不仅仅是数组

CSS&HTML:

1. 盒模型

  • 盒模型是CSS中用于描述网页元素布局的核心概念，其将每个HTML元素抽象为矩形盒子，由内容(content)、内边距padding、边框border、外边距margin四层结构组成，分为content-box(标准盒模型)和border-box(IE盒模型)
    • content-box:元素的width和height仅指content的宽和高，padding，border和margin的数值的增加也会增加元素的总尺寸。
    • border-box: 元素的wdth和height 包括了元素content，padding和border的尺寸，border-box可以简化布局机算，防止增加了padding和border的宽高导致超出预期尺寸。

2. 选择器

  • CSS选择器用于定位HTML元素并应用样式。不同选择器的优先级决定了当多条规则冲突时哪条生效。一般有 通配选择器*、元素选择器div、类选择器class、id选择器、属性选择器[type='text']、伪类:hover、伪元素::before、组合选择器(子代、后代、相邻兄弟h1+p、通用兄弟h1~p)。
  • 优先级：内联样式(1,0,0,0)>ID(0,1,0,0)>类class(0,0,1,0)>元素(0,0,0,1)>通配选择器(0,0,0,0) 样式的优先级根据这些在css中出现几次，在对应的地方显示几。然后从左到右，比较大小
  • !important 覆盖任何常规优先级，如果都有，则还是根据上述优先级进行表现。
  • 样式的写法：
    内联样式：
    <p style="color: red; font-size: 16px;">这是一段文字</p >
    
    内部样式表:
    <head>
  <style>
    p { color: blue; }
  </style>
    </head>
    
    外部样式：
        <head>
      <link rel="stylesheet" href="style.css">
    </head>

优先级：内联样式> 内部/外部（按在文档中出现的先后顺序，后定义的覆盖先定义的）。

3. BFC

  • BFC(Block Formatting Context,块级格式化上下文)是Web页面CSS视觉渲染中的一个概念，决定了块级盒子如何布局，以及浮动元素如何交互。简单来说，BFC就是一个独立的渲染区域，内部元素的布局不会影响外部。
  • 特性:
    • 同一个BFC中的内部块级盒子按照正常流垂直排列。
    • 盒子垂直方向的距离由margin 决定，同一个BFC的相邻块级盒子会发生margin折叠（取较大值位准）。
    • BFC可以包含浮动元素(即清除内部浮动)
    • BFC的区域不会与外部浮动盒子重叠。
  • 如何触发
    • 本身就是BFC
    • 浮动float：left/right 会触发
    • position：absolute fixed 会触发
    • display：flex/inline-flex
    • display：inline-block
    • display:table
    • overflow:hidden/auto/scroll
    • display:grid/inline-grid
    • display:flow-root(专门用来创建BFC）
  • 触发BFC的用途：触发之后，元素会成为一个独立的布局容器。具体作用
    • 清除内部浮动(解决父元素高度塌陷)
      • 当子元素浮动，父元素没有设置高度时，会高度塌陷。使用overflow：hidden就可以解决。
    • 避免外边距margin 折叠
      • 同一个BFC中的相邻块级盒子会发生margin折叠，此时可以将一个盒子包含在一个新的BFC容器中，他们分属于两个BFC，margin就不会折叠。
    • 实现自适应两栏布局
      • 左侧固定宽度向左浮动，右侧不设置宽度，这样左侧就会覆盖右侧左边的内容，如果触发bfc则，右侧不会与左侧浮动重叠，自动占据剩余宽度，实现自适应两栏布局。
  .left {
 float: left;
 width: 200px;
}
.right {
 overflow: hidden; /* 触发BFC，避开浮动 */
}
  • 防止文字环绕浮动元素
    • 通常浮动元素会让后续内联内容（如文字）环绕它，触发BFC可以独占一行，脱离环绕。
  • 隔离内部元素与外部的影响
    • BFC是一个独立的渲染区域，内部元素的布局（浮动，margin）不会影响外部元素。
  • 总结：BFC就是让元素自成一体，在布局中更可控，常用于清楚浮动，避免margin折叠，实现自适应布局等等。
avatar
文章
阅读
粉丝