哈哈哈

Appearance

HTML & CSS 部分 ​

  1. 请谈谈你在项目中使用 Flex 布局和 Grid 布局的经验。在什么场景下你会优先选择 Grid 而不是 Flex？
  2. 如何实现一个元素的水平垂直居中？请列举你知道的所有方法。
  3. 请解释一下 CSS 的盒模型（Box Model）。box-sizing: border-box 的作用是什么？
  4. 什么是 BFC（块级格式化上下文）？它有什么特性？如何触发 BFC？
  5. 请谈谈你对 CSS 选择器优先级（Specificity）的理解，并举例说明。
  6. 你有过移动端适配的经验吗？请介绍一下你常用的方案（如 rem、vw/vh、媒体查询等）。
  7. CSS 中 position 的属性值有哪些？它们分别相对于什么进行定位？

JavaScript 核心部分 ​

  1. 执行上下文/作用域/闭包：

    • 请简述 JavaScript 的执行上下文（Execution Context）的概念，包括全局执行上下文和函数执行上下文。
    • 什么是闭包（Closure）？闭包有哪些常见的应用场景和需要注意的问题（如内存泄漏）？
    • 请解释一下变量提升（Hoisting）机制。

  2. 事件循环（Event Loop）：

    • 请详细解释一下 JavaScript 的事件循环机制。宏任务（MacroTask）和微任务（MicroTask）有什么区别？
    • 请说出以下代码的输出顺序，并解释原因：
      javascript
      console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');

  3. ES6+ 语法：

    • 请谈谈箭头函数和普通函数的区别（如 this 的指向、能否作为构造函数等）。
    • let、const 和 var 有什么区别？
    • Promise 是为了解决什么问题？请手写一个简单的 Promise 或者说明 Promise.all 和 Promise.race 的区别和使用场景。
    • 如何使用 Async/Await 来处理异步操作？它和 Promise 有什么关系？如何在 Async 函数中进行错误处理？

Vue.js 框架部分 ​

  1. Vue 2/3 基础与使用：

    • Vue 2 和 Vue 3 在响应式原理上有什么主要区别？（Object.defineProperty vs. Proxy）
    • 请详细说明 Vue 的生命周期钩子函数，分别在哪个阶段被调用？Vue 3 的 setup 函数在生命周期中的哪个阶段执行？
    • Vue 组件之间的通信方式有哪些？（如 props/$emit, provide/inject, $attrs, Vuex/Pinia 等）
    • v-if 和 v-show 的区别是什么？
    • computed 和 watch 的区别以及各自的适用场景是什么？

  2. Vue 响应式原理（深入）：

    • 能简单描述一下 Vue 2 的响应式系统是如何工作的吗？它有什么缺陷？
    • Vue 3 的 ref 和 reactive 有什么区别？为什么需要 ref？

  3. 状态管理（Vuex/Pinia）：

    • 为什么需要在 Vue 应用中使用全局状态管理工具？它解决了什么问题？
    • 请简述 Vuex 的核心概念（State, Getters, Mutations, Actions）。
    • 为什么 Mutations 必须是同步函数，而 Actions 可以包含异步操作？
    • 你有使用过 Pinia 吗？相比 Vuex，它有什么优势？

Git 版本控制 ​

  1. 请描述一下你的常规 Git 工作流程（例如，基于 Git Flow 或功能分支工作流）。
  2. git merge 和 git rebase 有什么区别？在实际工作中你更倾向于使用哪一个，为什么？
  3. 如果本次提交（commit）的注释写错了，如何修改？如果修改了一个文件，但想撤销在工作区的修改，该用什么命令？
  4. 请解释 git pull 和 git fetch 的区别。

综合与项目实践 ​

  1. 在你的项目中，你是如何管理项目的 CSS 样式的？（例如：CSS Modules、Scoped CSS、CSS-in-JS、预处理器等）
  2. 你如何处理前端应用的性能优化？可以从加载性能、运行时性能等方面谈谈。
  3. 请描述一个你遇到的最有挑战性的技术问题，你是如何分析并解决它的？
  4. 你有使用 AI 编程工具（如 Cursor, GitHub Copilot）的经验吗？它在你日常开发中扮演了什么角色？你是如何利用它来提高效率的？你认为它的局限性在哪里？

回答 ​

JavaScript 核心部分 ​

  1. 请简述 JavaScript 的执行上下文（Execution Context）的概念，包括全局执行上下文和函数执行上下文。

执行上下文是js代码被执行时的环境，它分为三种类型：

  • 全局执行上下文：这是代码运行时首先创建的环境。它会创建一个全局对象 window ，并将 this 指向这个全局对象。
  • 函数执行上下文：每次调用函数时都会创建一个新的函数执行上下文
  • eval 函数执行上下文：少

每个执行上下文都有两个阶段： 创建阶段和执行阶段，创建阶段主要是创建变量对象、建立作用域链、确定 this 指向；执行阶段是执行代码和为变量赋值。

这些上下文组成一个调用栈，遵循后进先出的规则。

  1. 什么是闭包（Closure）？闭包有哪些常见的应用场景和需要注意的问题（如内存泄漏）？ 闭包是指一个函数能够 记住并访问 其定义时的作用域，即使这个函数在其词法作用域之外被执行。简单说就是函数内部定义的函数能够访问外部函数的变量。

应用场景：

  • 创建私有变量：只对外暴露特定的变量或方法
  • 回调函数和事件处理：这种情况是为了保持函数执行时所需的状态
  • 数据封装和模块化

闭包使用的时候需要注意内存泄露的问题，因为闭包使用了外部的变量对象如果没有及时解引用这些对象可能导致内存无法被回收导致内存泄露

  1. 请解释一下变量提升（Hoisting）机制。 就是在代码执行之前，js引擎会将变量和函数的定义提升到其作用域的顶部。
  • 使用 var 定义的变量声明会被提升，但赋值不会
  • 函数声明会被整体提升，如用 function 定义的函数可以先调用再定义
  1. 事件循环（Event Loop）：
    • 请详细解释一下 JavaScript 的事件循环机制。宏任务（MacroTask）和微任务（MicroTask）有什么区别？

js是单线程的，事件循环机制是处理异步操作的核心。它协调调用栈、宏任务队列和微任务队列的工作。 工作流程可以简述为：

  1. 执行全局同步代码，形成调用栈
  2. 当调用栈为空时，开始事件循环
  3. 此时再检查微任务队列，如果有任务就全部执行完
  4. 微任务全部执行完了才开始执行宏任务，宏任务里面可能有同步代码、微任务和宏任务，会按照同步任务-微任务-宏任务的顺序执行

宏任务和微任务的主要区别是，在一次事件循环里，只要微任务队列不为空，事件循环就会持续清空微任务队列，清空完之后才会去取下一个宏任务。

Vue.js 框架部分 ​

  1. Vue 2 和 Vue 3 在响应式原理上有什么主要区别？ vue2 使用的是 Object.defineProperty 来递归劫持已知属性，对新增属性和数组操作不友好；vue3 使用的是 Proxy 代理整个对像，能原生拦截包括增删在内的各种操作，实现了真正的按需响应式，性能更好。