自己有开发过组件库或者插件吗？npm 开源的

有，开发过一个基于 Vue.js 的组件库，其中包括了一些常用的 UI 组件，例如按钮、输入框、下拉框等。这个组件库是基于 Vue.js 的单文件组件开发的，使用了一些常用的技术，例如 TypeScript、SCSS 等。这个组件库已经发布到了 npm 上，可以通过 npm 安装并使用。

如何定义主题变量

定义主题变量时，可以使用 CSS 变量（Custom Properties）来实现。CSS 变量是一种在 CSS 中定义的变量，可以在整个样式表中使用。以下是一个简单的例子：

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
}

.button {
    background-color: var(--primary-color);
    color: white;
}

.link {
    color: var(--secondary-color);
}

在这个例子中，我们在 :root 伪类中定义了两个主题变量，然后在其他地方使用了这些变量。这样可以使得主题变量的定义更加集中，方便进行统一的管理和修改。

如何实现一键切换网页主题

html 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css" id="theme-stylesheet">
    <title>Theme Switcher</title>
</head>
<body>
    <div class="container">
        <h1>Theme Switcher</h1>
        <button onclick="toggleTheme()">Toggle Theme</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

css 结构

:root {
    --bg-color-light: #ffffff;
    --text-color-light: #333333;
    --bg-color-dark: #333333;
    --text-color-dark: #ffffff;
}

body {
    transition: background-color 0.5s ease, color 0.5s ease;
    background-color: var(--bg-color-light);
    color: var(--text-color-light);
}

.dark-mode body {
    background-color: var(--bg-color-dark);
    color: var(--text-color-dark);
}

js 逻辑

function toggleTheme() {
    const body = document.body;
    body.classList.toggle('dark-mode');
}

多维嵌套数组如何处理为一维数组并完成去重和排序

工作版

let arr = [1, [2, 3], [4, [5, 6]], 7, [8, 9]];
arr = [...new Set(arr.flat(Infinity).sort((a, b) => b - a))]
console.log(arr)

面试版

// 多维嵌套数组
const nestedArray = [1, [2, 3], [4, [5, 6]], 7, [8, 9]];

// 递归扁平化数组
function flattenArray(arr) {
  return arr.reduce((acc, curr) => acc.concat(Array.isArray(curr) ? flattenArray(curr) : curr), []);
}

// 冒泡排序
function bubbleSort(arr) {
  const len = arr.length;
  for (let i = 0; i < len - 1; i++) {
    for (let j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        // 交换位置
        const temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}

// 去重
function uniqueArray(arr) {
  return Array.from(new Set(arr));
}

// 执行操作
const flatArray = flattenArray(nestedArray);
const sortedArray = bubbleSort(flatArray);
const uniqueSortedArray = uniqueArray(sortedArray);

console.log(uniqueSortedArray);

vue3 中的 vite.js 开发环境的更新与构建原理

Vite.js 是一个基于 Vue 3 的轻量级、快速的前端开发构建工具。它的核心思想是利用现代浏览器对 ES 模块的支持，以及服务端渲染 (SSR) 在开发过程中的优势，从而实现了快速的开发启动和高效的构建。
以下是 Vite.js 开发环境的更新与构建原理的基本概念：
开发环境：
- 基于 ES 模块导入： Vite.js 利用现代浏览器对 ES 模块的支持，直接使用原生 ES 模块导入的方式，无需打包成一个巨大的文件。
- 按需编译： Vite.js 通过服务端动态编译的方式，仅编译和返回当前请求的文件，而不是像传统的打包工具一样将所有代码编译成一个包。
- HMR（热模块替换）： Vite.js 使用了 HMR 技术，它能够在不刷新整个页面的情况下，替换、添加或删除模块。这使得开发过程中的实时预览更加高效。
构建环境：
- 预构建： Vite.js 在生产构建前，会预先编译并提前生成与生产环境相对应的资源，例如预构建 SSR 部分、提前处理样式等。这有助于加速构建过程。
- 原生 ES 模块：在构建阶段，Vite.js 会将模块化的代码编译成原生 ES 模块，这样可以充分利用浏览器的缓存机制，减少加载时间。
- 代码拆分： Vite.js 支持代码拆分，将代码拆分成小块，只加载当前页面需要的部分，以提高首屏加载速度。
- 资源优化： Vite.js 在构建时会对资源进行优化，例如压缩 JavaScript、CSS，提取公共代码，生成 Source Map 等。
总体而言，Vite.js 利用现代浏览器的特性，以及优化构建流程的方式，实现了开发环境的快速启动和构建环境的高效性能。这些特性使得在使用 Vite.js 进行前端开发时，能够享受到更好的开发体验和更高的性能。

vite 如何实现的热更新

Vite 使用了热模块替换（Hot Module Replacement，简称 HMR）技术来实现热更新。HMR 是一种在应用程序运行时替换、添加或删除模块而无需刷新整个页面的技术。这使得开发者能够在保持应用程序运行状态的同时，看到他们所做更改的实时效果。
以下是 Vite 实现热更新的基本原理：
- ES 模块的动态导入： Vite 基于现代浏览器对 ES 模块的支持，采用原生 ES 模块的导入方式。每个文件都是一个模块，它们可以被独立地请求和加载。
- WebSocket 通信： Vite 使用 WebSocket 与开发服务器建立持久连接。这允许服务器向客户端推送更新信息，而不需要客户端发起新的请求。WebSocket 使得服务器和客户端能够实时通信，以便了解文件的变化。
- 模块热替换插件： Vite 使用了 Rollup 插件 vite:hrm，这个插件负责捕捉模块的变化并通知浏览器中运行的应用程序进行更新。
- 模块标识符的保持：在 Vite 中，每个模块都有一个唯一的标识符（通常是相对路径），这个标识符在整个生命周期中保持不变。当文件发生变化时，新的模块会被加载，但保持相同的标识符，确保模块的替换是无缝的。
- 局部更新而非整体刷新： Vite 使用 HMR 技术，只更新发生变化的模块，而不是刷新整个页面。这带来了更快的反馈速度，因为只有受到更改影响的部分才需要重新加载。
- 总体来说，Vite 利用 ES 模块的动态导入、WebSocket 通信以及模块热替换插件的配合，实现了热更新的功能，让开发者能够更加高效地进行实时预览和调试。

构建工具还了解过其他的吗

Webpack： Webpack 是一个强大的静态模块打包工具。它支持多种资源的打包，包括 JavaScript、CSS、图片等。Webpack 提供了丰富的插件系统和配置选项，可以进行高度定制。
Rollup： Rollup 是一个适用于 JavaScript 库的模块打包器，它专注于生成更小、更高效的输出。Rollup 适用于那些希望通过 tree-shaking 和代码分割等技术来优化输出的项目。
Parcel： Parcel 是一个零配置的前端打包工具。与 Webpack 不同，Parcel 不需要复杂的配置，它可以自动地解析和处理项目中的各种资源。
Gulp： Gulp 是一个基于任务的构建工具，用于自动化前端开发工作流程。通过编写任务，Gulp 可以处理文件的压缩、合并、编译等任务。
Grunt： Grunt 是另一个任务执行器，类似于 Gulp。它使用配置文件定义一系列任务，然后运行这些任务以完成构建过程。
Babel：虽然 Babel 本身不是一个构建工具，但它通常与其他构建工具结合使用，用于将新版 JavaScript 转换为浏览器能够执行的旧版 JavaScript。
这些工具在不同的场景下有各自的优势和适用性。选择合适的构建工具通常取决于项目的复杂性、开发团队的经验以及个人偏好。在实际项目中，有时也会使用多个工具组合，以满足不同的需求。

webpack 中如何不编译某一个文件

在 Webpack 中，如果你想要排除某个文件或目录不被编译，你可以使用 exclude 选项。这可以通过配置 module.rules 中的 Loader 来实现。以下是一个简单的例子：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除 node_modules 目录
                use: "babel-loader",
            },
        ],
    },
};

node 开发过什么项目吗

有，我之前开发过一个基于 Node.js 的后端项目，这是一个基于 Express 框架的 RESTful API 服务。这个项目主要包括了用户管理、权限管理、数据管理等功能，使用了一些常用的技术，例如 MongoDB、Mongoose、JWT 等。这个项目已经部署到了生产环境中，运行稳定。

3D 开发接触过吗

有，我之前接触过一些 3D 开发的相关技术，例如 Three.js。Three.js 是一个基于 WebGL 的 3D 图形库，它可以帮助开发者在浏览器中创建复杂的 3D 场景。我曾经使用 Three.js 开发过一些简单的 3D 场景，例如旋转的立方体、移动的球体等。

vue2 和 vue3 的区别

性能优化:
- Vue.js 3 引入了一个名为 Proxy 的新的响应式系统，与 Vue.js 2 中的 Object.defineProperty 相比，提供了更好的性能。新的编译器和虚拟 DOM 的改进也有助于提高整体性能。
Composition API:
- Vue.js 3 引入了 Composition API，这是一个新的组织组件逻辑的方式。相较于 Vue.js 2 的 Options API，Composition API 更灵活、可组合且易于维护。
Teleport:
- Vue.js 3 引入了 Teleport 组件，用于更容易地在组件的模板中将内容渲染到 DOM 中的不同位置。这可以简化一些复杂的 UI 布局需求。
Fragment:
- Vue.js 3 支持片段（Fragment），允许组件返回多个根节点而无需包装它们。
新的生命周期钩子:
- Vue.js 3 引入了新的生命周期钩子，例如 beforeMount 和 beforeUnmount，以替代 Vue.js 2 中的一些已弃用的生命周期钩子。
全局 API 的改进:
- Vue.js 3 对全局 API 进行了重新组织，例如 Vue.component 变为 app.component。
Tree-shakable:
- Vue.js 3 设计为更容易进行树摇（tree-shaking），以减小构建的大小。
TypeScript 支持改进:
- Vue.js 3 对 TypeScript 的支持更加友好，包括更强大的类型推断和更好的编辑器支持。
更好的逻辑复用和组织:
- Composition API 的引入使得在组件之间更容易地共享和复用逻辑。

vue3 diff 算法的原理

静态标记：
- Vue.js 3 在编译阶段对模板进行标记，将静态节点和动态节点进行了明确的区分。
- 静态节点是在渲染过程中永远不会改变的节点，而动态节点可能会发生变化。
Patch Flag：
- 对于动态节点，Vue.js 3 使用 patch flag 优化，用于标记节点的类型和属性是否需要更新。
- Patch flag 将这些信息编码为一个数字，以便在比较两个节点时进行高效的位运算。
Block Tree：
- Vue.js 3 引入了 Block Tree 的概念，将静态节点包装在一个单独的块中。这个块中的节点在渲染过程中保持不变，可以跳过对它们的比较。
Fragments：
- Vue.js 3 支持片段（Fragments），使得多个根节点可以在渲染时被处理，而无需额外的包装。这减少了不必要的嵌套层级，提高了效率。
缓存节点：
- 在渲染过程中，Vue.js 3 会缓存之前渲染的静态节点，以便在下一次渲染时直接使用，而不需要重新创建和比较。
动态组件的优化：
- 对于动态组件，Vue.js 3 采用了一种优化策略，只在组件类型发生变化时才进行重新渲染。
事件处理优化：
- Vue.js 3 对事件处理进行了优化，避免不必要的事件绑定和解绑操作，提高了性能。
总体而言，Vue.js 3 的 diff 算法通过静态标记、Patch Flag、Block Tree 等优化手段，减少了不必要的比较和 DOM 操作，提高了渲染性能。这一系列的优化使得 Vue.js 3 在处理大规模组件树时更加高效。

pinia 的原理

Store 实例：
- 在 Pinia 中，状态是通过创建 Store 实例来管理的。每个 Store 实例都包含了一部分应用程序的状态和一组用于修改状态的方法。
Vue 3 的 Composition API：
- Pinia 利用 Vue 3 的 Composition API。每个 Store 都是一个使用 Composition API 创建的独立组件。
Reactivity（响应性）：
- Pinia 使用 Vue 3 的响应性系统，这使得在状态变化时能够自动触发相关的更新。
Store 的创建和注册：
- 创建 Store 实例时，需要使用 createStore 函数。这个函数接受一个工厂函数，用于创建具体的 Store 实例。
- 使用 app.use(pinia) 将 Pinia 插件注册到 Vue 应用中，使其能够全局使用。
模块化的状态：
- Pinia 支持模块化的状态管理，通过将不同功能或模块的状态分割到不同的 Store 中，以便更好地组织和维护代码。
插件系统：
- Pinia 提供了插件系统，允许开发者根据需要扩展其功能。这包括在 Store 实例创建前、创建后、或在其销毁前执行一些逻辑。
Devtools 集成：
- Pinia 能够与 Vue Devtools 集成，这使得在开发阶段更容易监控和调试状态的变化。
严格模式：
- Pinia 支持在开发模式下启用严格模式，类似于 Vuex，以帮助捕获状态变更的非法来源。

修改 pinia 中的数据到页面视图发生变化，这中间发生了什么

调用 Mutation 或 Action:
- 在你的组件中，你可能调用了 Pinia Store 实例中的 Mutation 或 Action 方法，这些方法用于修改状态。
Mutation 或 Action 的执行:
- 当 Mutation 或 Action 被调用时，其中的逻辑会执行。这可能包括计算新的状态值、异步操作等。
状态变更触发 Vue3 的响应式系统
- 当 Mutation 或 Action 中修改了状态时，Vue 3 的响应性系统被触发。这是因为 Pinia 使用了 Vue 3 的 Composition API，状态是通过 ref 或 reactive 进行包裹的，从而建立了依赖关系。
Reactivity（响应性）更新:
- Vue 3 的响应性系统会检测到状态的变更，并通知所有依赖于该状态的组件进行更新。这是通过内部的依赖追踪系统实现的。
异步更新
- 页面的更新是异步的，Vue 3 使用微任务队列（microtask queue）来进行批量更新，以提高性能。这确保了在同一个事件循环周期内，所有相关的状态变更都被收集起来，并在下一个微任务时一次性更新视图。
组件更新
- 组件中与修改的状态相关的视图部分会被更新，确保显示最新的数据

原型链的理解

每一个对象都有一个原型，我们访问对象内部的某一个属性时，如果对象内部没有这个属性，那么就会去原型链上查找，直到找到这个属性或者到达原型链的顶端（Object.prototype）。如果还是找不到那么返回 undefined。

闭包的理解

闭包是指有权访问另一个函数作用域中的变量的函数。闭包是 JavaScript 中一个非常重要的概念，它允许函数访问其外部作用域中的变量，即使在函数返回之后，这些变量仍然可以被访问。

浏览器的缓存机制

浏览器缓存机制是指浏览器在加载网页时，将一些静态资源（例如图片、样式表、脚本等）保存在本地，以便在下次访问同一网页时能够更快地加载这些资源。浏览器缓存机制主要包括强缓存和协商缓存两种方式。

跨域是什么

跨域是指在 Web 开发中，一个域下的文档或脚本试图去请求另一个域下的资源，这时就会出现跨域问题。跨域问题是由浏览器的同源策略引起的，同源策略要求不同域之间的通信必须通过同源（协议、域名、端口号完全相同）。

requestAnimationFrame 的使用

requestAnimationFrame 是浏览器提供的一个用于优化动画效果的 API。它可以让浏览器在下一次重绘之前执行指定的回调函数，以便实现更加流畅的动画效果。

hooks 相对于 class 的优势

更加简洁：使用 Hooks 可以让你在函数组件中管理状态，而不需要使用 class 组件。
更加灵活：Hooks 可以在函数组件中使用，这使得你可以更加灵活地组织和复用组件逻辑。
更加易于测试：由于 Hooks 可以在函数组件中使用，这使得组件的逻辑更加易于测试。
更加易于理解：Hooks 可以让你在函数组件中使用状态和其他 React 特性，这使得组件的逻辑更加易于理解。

React 函数组件的性能优化

使用 React.memo：React.memo 是一个高阶组件，它可以帮助你避免不必要的组件渲染。当组件的 props 没有发生变化时，React.memo 会返回上一次渲染的结果，从而避免不必要的渲染。
使用 useMemo：useMemo 是一个 Hook，它可以帮助你避免不必要的计算。当你需要根据某些 props 计算出一个值时，你可以使用 useMemo 来缓存计算结果，从而避免不必要的计算。
使用 useCallback：useCallback 是一个 Hook，它可以帮助你避免不必要的函数创建。当你需要传递一个回调函数给子组件时，你可以使用 useCallback 来缓存回调函数，从而避免不必要的函数创建。
使用 React Profiler：React Profiler 是 React 提供的一个性能分析工具，它可以帮助你分析组件的渲染性能。你可以使用 React Profiler 来找出组件渲染的瓶颈，并进行相应的优化。

移动端的项目相较于 PC 的区别

屏幕尺寸：移动端设备的屏幕尺寸通常比 PC 设备小，因此需要对页面布局进行适配。
触摸操作：移动端设备通常使用触摸屏进行操作，因此需要对用户交互进行优化。
网络环境：移动端设备通常使用无线网络进行访问，因此需要对网络环境进行优化。
设备兼容性：移动端设备的硬件和软件环境各不相同，因此需要对设备兼容性进行测试。
性能优化：移动端设备的性能通常比 PC 设备差，因此需要对性能进行优化。

移动端的适配方案

媒体查询：使用媒体查询可以根据屏幕尺寸来调整页面布局。
rem：使用 rem 单位可以根据根元素的字体大小来调整页面布局。
vw 和 vh：使用 vw 和 vh 单位可以根据视口的宽度和高度来调整页面布局。
flex 布局：使用 flex 布局可以根据容器的尺寸来调整子元素的布局。
百分比布局：使用百分比布局可以根据父元素的尺寸来调整子元素的布局。

最近前端的新技术有什么

没有标准答案，自己去掘金里边刷一刷新的，开放性问题

项目中的亮点（建议，不是答案）

技术选型：项目中使用了一些新的技术，例如 Vue3、Vite 等，这些新技术可以提高开发效率和性能。
性能优化：项目中对性能进行了一些优化，例如使用了懒加载、代码分割等技术，以提高页面加载速度。
用户体验：项目中对用户体验进行了一些优化，例如使用了一些动画效果、交互效果等，以提高用户体验。
团队协作：项目中团队协作良好，开发进度顺利，项目质量较高。
项目规范：项目中遵循了一些规范，例如代码规范、文档规范等，以提高项目的可维护性。

event loop 的理解

事件循环（Event Loop）是 JavaScript 引擎中负责执行和管理代码的一部分，用于处理异步操作和事件。在浏览器中，事件循环是实现 JavaScript 异步执行的机制之一。

基本理解：

同步任务和异步任务：
- JavaScript 代码分为同步任务和异步任务。
- 同步任务是按照代码的顺序依次执行的，而异步任务则是在将来的某个时刻执行，不会阻塞程序的执行。
任务队列：
- 事件循环中存在一个任务队列（Task Queue），用于存放不同类型的任务。
- 主线程执行完同步任务后，会检查任务队列中是否有待执行的异步任务。
执行栈（Call Stack）：
- 执行栈是用来存放当前执行上下文的地方，当一个函数被调用时，其执行上下文会被推入执行栈。
- 执行栈是同步任务的执行环境。
事件触发和回调函数：
- 异步任务完成后，会被放入任务队列，等待执行。
- 一旦执行栈为空，主线程会从任务队列中取出一个任务（通常是先进先出），推入执行栈执行。
微任务和宏任务：
- 任务队列中的异步任务可以分为微任务（Microtasks）和宏任务（Macrotasks）。
- 微任务在每个宏任务执行完之后立即执行，它们比宏任务优先级更高。

Event Loop 执行过程：

执行同步代码：执行栈中的同步任务逐个执行，直至执行栈为空。
执行微任务：检查微任务队列，执行队列中的所有微任务。
执行宏任务：从宏任务队列中选择一个任务执行，执行完后返回第2步。
重复：重复上述步骤，形成一个循环。

DOCTYPE 是干什么的

DOCTYPE 是 Document Type 的缩写，它是一种标记语言的声明，用于告诉浏览器当前文档使用的是哪种标记语言。DOCTYPE 通常出现在 HTML 文档的开头，它告诉浏览器如何解析文档，以及如何渲染页面。

css 选择器的优先级

CSS 选择器的优先级是用于确定哪个样式应用于元素的规则。CSS 选择器的优先级由四个部分组成，分别是行内样式、ID 选择器、类选择器和标签选择器。优先级的计算规则如下：
- 行内样式：行内样式的优先级最高，它会覆盖其他所有的样式。
- ID 选择器：ID 选择器的优先级次之，它会覆盖类选择器和标签选择器。
- 类选择器：类选择器的优先级再次之，它会覆盖标签选择器。
- 标签选择器：标签选择器的优先级最低，它会被其他所有的选择器覆盖。

js 的事件三阶段

JavaScript 事件有三个阶段，分别是捕获阶段、目标阶段和冒泡阶段。在捕获阶段，事件从最外层的元素向目标元素传播；在目标阶段，事件到达目标元素；在冒泡阶段，事件从目标元素向最外层的元素传播。

构造函数，实例化对象，原型对象，三者的关系

在 JavaScript 中，构造函数、实例化对象和原型对象之间有着紧密的关系。构造函数是用于创建对象的函数，它定义了对象的属性和方法；实例化对象是通过构造函数创建的对象，它继承了构造函数的属性和方法；原型对象是构造函数的一个属性，它包含了构造函数的原型链。

js 的 this 指向

在 JavaScript 中，this 是一个关键字，它指向当前执行上下文的对象。在全局作用域中，this 指向全局对象；在函数中，this 的值取决于函数的调用方式；在对象方法中，this 指向调用该方法的对象；在构造函数中，this 指向新创建的对象。

你是怎么理解 promise 的

Promise 是 JavaScript 中用于处理异步操作的对象。它代表了一个异步操作的最终完成或失败，并且可以返回一个值。Promise 有三种状态，分别是 pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise 有两个重要的方法，分别是 then 和 catch，它们用于处理异步操作的结果。

vue2 中 v-if 和 v-for 能否在一起使用

在 Vue2 中，v-if 和 v-for 是可以在一起使用的，但是需要注意一些细节。当 v-if 和 v-for 同时出现在同一个元素上时，v-for 的优先级更高，这意味着 v-if 的条件会在每次循环中都被执行。如果你想要在 v-for 的每一项中使用 v-if，你可以将 v-if 放在一个包裹元素上。

vue3 中如何通过 ref 操作 dom

在 Vue3 中，你可以通过 ref 来操作 DOM 元素。ref 是一个响应式对象，它可以包装任何值，包括 DOM 元素。你可以通过 ref 创建一个 ref 对象，然后将这个 ref 对象绑定到 DOM 元素上。这样你就可以通过 ref 对象来操作 DOM 元素，例如获取元素的属性、设置元素的样式等。

pinia 和 vuex 的区别

API 设计：Pinia 的 API 设计更加简洁和灵活，它使用了一些新的特性，例如 Composition API，以提高开发效率。
性能优化：Pinia 在性能方面进行了一些优化，例如使用了一些新的技术，例如 Proxy，以提高性能。
TypeScript 支持：Pinia 对 TypeScript 的支持更加友好，它提供了更强大的类型推断和更好的编辑器支持。
插件系统：Pinia 提供了插件系统，允许开发者根据需要扩展其功能。
总体而言，Pinia 是一个专门为 Vue3 设计的状态管理库，它在 API 设计、性能优化、TypeScript 支持等方面都有一些优势。

http 的常用状态码

200 OK：表示请求成功。
301 Moved Permanently：表示请求的资源已经被永久移动到新的 URL。
404 Not Found：表示请求的资源不存在。
500 Internal Server Error：表示服务器内部错误。
503 Service Unavailable：表示服务器暂时不可用。

http 的请求过程

建立连接：客户端向服务器发起连接请求，建立 TCP 连接。
发送请求：客户端向服务器发送请求报文，包括请求行、请求头和请求体。
服务器处理请求：服务器接收到请求报文后，根据请求的内容进行处理，然后返回响应报文。
接收响应：客户端接收到服务器返回的响应报文，然后进行处理。
关闭连接：客户端和服务器之间的连接在请求和响应结束后会被关闭。

了解 ajax 吗

了解。Ajax 是一种用于创建交互式网页应用的技术。它可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。Ajax 使用了 XMLHTTPRequest 对象来实现异步通信，这使得网页能够更加动态和交互。

什么是跨域

跨域是指在 Web 开发中，一个域下的文档或脚本试图去请求另一个域下的资源，这时就会出现跨域问题。跨域问题是由浏览器的同源策略引起的，同源策略要求不同域之间的通信必须通过同源（协议、域名、端口号完全相同）。

如何解决跨域

JSONP：JSONP 是一种跨域请求的方法，它通过动态创建 script 标签来实现跨域请求。
CORS：CORS 是一种跨域资源共享的机制，它允许服务器在响应中设置一个 Access-Control-Allow-Origin 头，以允许跨域请求。
代理：代理是一种跨域请求的方法，它通过服务器端转发请求来实现跨域请求。
Nginx 反向代理：Nginx 反向代理是一种跨域请求的方法，它通过 Nginx 服务器来转发请求来实现跨域请求。

事件委托和事件冒泡的区别

事件委托是一种利用事件冒泡的机制来处理事件的方法。它的原理是将事件处理程序绑定到父元素上，然后利用事件冒泡的机制来处理子元素上的事件。事件委托的优点是可以减少事件处理程序的数量，提高性能。

深浅拷贝

深拷贝是指在拷贝对象时，将对象的所有属性和方法都复制到新的对象中。深拷贝会创建一个新的对象，它与原对象完全独立，修改新对象不会影响原对象。
浅拷贝是指在拷贝对象时，只拷贝对象的第一层属性和方法。浅拷贝不会创建一个新的对象，它只是复制了原对象的引用，修改新对象会影响原对象。

首屏加载的优化方案有什么

图片懒加载：使用图片懒加载可以延迟加载图片，以提高页面加载速度。
代码分割：使用代码分割可以将页面的代码分割成多个小块，以提高页面加载速度。
预加载：使用预加载可以在页面加载时预先加载一些资源，以提高页面加载速度。
缓存：使用缓存可以将一些静态资源缓存到本地，以提高页面加载速度。
压缩：使用压缩可以将一些静态资源进行压缩，以提高页面加载速度。

长列表优化的方案

虚拟滚动：使用虚拟滚动可以只渲染可见区域的内容，以提高页面渲染速度。
懒加载：使用懒加载可以延迟加载列表中的内容，以提高页面加载速度。
缓存：使用缓存可以将列表中的内容缓存到本地，以提高页面加载速度。
压缩：使用压缩可以将列表中的内容进行压缩，以提高页面加载速度。

发布订阅的思路

发布订阅是一种设计模式，它用于解耦事件的发布者和订阅者。在发布订阅模式中，发布者和订阅者之间没有直接的联系，而是通过一个中间件来进行通信。当发布者发布一个事件时，中间件会通知所有订阅者，订阅者会收到通知并进行相应的处理。

24年面试题汇总

自己有开发过组件库或者插件吗？npm 开源的

如何定义主题变量

如何实现一键切换网页主题

多维嵌套数组如何处理为一维数组并完成去重和排序

vue3 中的 vite.js 开发环境的更新与构建原理

vite 如何实现的热更新

构建工具还了解过其他的吗

webpack 中如何不编译某一个文件

node 开发过什么项目吗

3D 开发接触过吗

vue2 和 vue3 的区别

vue3 diff 算法的原理

pinia 的原理

修改 pinia 中的数据到页面视图发生变化，这中间发生了什么

原型链的理解

闭包的理解

浏览器的缓存机制

跨域是什么

requestAnimationFrame 的使用

hooks 相对于 class 的优势

React 函数组件的性能优化

移动端的项目相较于 PC 的区别

移动端的适配方案

最近前端的新技术有什么

项目中的亮点（建议，不是答案）

event loop 的理解

基本理解：

Event Loop 执行过程：

DOCTYPE 是干什么的

css 选择器的优先级

js 的事件三阶段

构造函数，实例化对象，原型对象，三者的关系

js 的 this 指向

你是怎么理解 promise 的

vue2 中 v-if 和 v-for 能否在一起使用

vue3 中如何通过 ref 操作 dom

pinia 和 vuex 的区别

http 的常用状态码

http 的请求过程

了解 ajax 吗

什么是跨域

如何解决跨域

事件委托和事件冒泡的区别

深浅拷贝

首屏加载的优化方案有什么

长列表优化的方案

发布订阅的思路