Webpack 的四个核心概念是什么？

列举并简述 Webpack 的四大核心配置项。
概念 描述
entry 入口文件，指定 Webpack 开始构建的位置
output 输出路径与文件名配置
loader 处理非 JS 文件（如 CSS、图片、TypeScript）
plugin 扩展 Webpack 功能（如压缩、优化、注入变量）

Vue 3 面试题集

基础概念

1. Vue 3 相比 Vue 2 有哪些重大变化？

答案：

• 性能提升：Vue 3 重写了虚拟 DOM 实现，渲染性能提升约 1.3~2 倍，内存占用减少约 50%
• Composition API：新增组合式 API，提供更灵活的逻辑组织和复用方式
• TypeScript 支持：Vue 3 是用 TypeScript 重写的，提供了更好的类型推断
• Teleport 组件：允许将组件的内容传送到 DOM 的其他位置
• Fragments：组件可以有多个根节点
• Suspense：处理异步组件的新特性
• 响应式系统升级：使用 ES6 的 Proxy 代替 Object.defineProperty，解决了 Vue 2 中的数组和对象响应式问题
• 全局 API 改为应用实例调用：减少了全局污染
• 更好的 Tree-shaking 支持：减小打包体积

编写 Webpack 插件可以帮助你在 Webpack 构建过程中添加自定义行为。Webpack 插件是一个具有 apply 方法的 JavaScript 对象。这个 apply 方法会在 Webpack 编译器实例上被调用，并且你可以通过这个方法来访问 Webpack 的编译器对象，从而在特定的编译阶段插入自定义逻辑。 下面是一个简单的步骤指南和示例代码，帮助你编写一个基本的 Webpack 插件。
步骤指南
创建插件对象：创建一个 JavaScript 对象，并定义一个 apply 方法。
访问编译器对象：在 apply 方法中，通过参数访问 Webpack 编译器对象。
绑定钩子：使用编译器对象提供的钩子来绑定你的插件逻辑。
导出插件：将你的插件对象导出，以便在 Webpack 配置中使用。
示例代码
假设我们要编写一个简单的插件，在 Webpack 构建完成后输出一条消息到控制台。
创建插件文件 首先，创建一个文件 MyWebpackPlugin.js，内容如下：

目录结构

Vue 3的源码采用monorepo的方式组织，使用pnpm进行包管理，主要包含以下核心模块：

• reactivity: 响应式系统
• runtime-core: 与平台无关的运行时核心
• runtime-dom: 浏览器平台特定的运行时
• compiler-core: 与平台无关的编译器核心
• compiler-dom: 浏览器平台特定的编译器实现
• compiler-sfc: 单文件组件(.vue文件)编译器
• shared: 共享工具函数
• vue: 完整版本，包含运行时和编译器

适配问题

react相关问题

网络问题

性能问题

兼容性问题

工程化问题

安全问题

移动端适配问题。

createElement 和 cloneElement 有什么区别？

传入的第一个参数不同

React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。

它接受三个参数，第一个参数可以是一个标签名。如 div、span，或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数，皆作为组件的子组件。

1

React.createElement(type, [props], [...children]);

React.cloneElement()与 React.createElement()相似，不同的是它传入的第一个参数是一个 React 元素，而不是标签名或组件。新添加的属性会并入原有的属性，传入到返回的新元素中，而旧的子元素将被替换。将保留原始元素的键和引用。

1

React.cloneElement(element, [props], [...children]);

JavaScript 基础

Javascript中apply和call的区别

参数传递方式不同：call 方法接受的是一个参数列表，而 apply 方法接受的是一个参数数组。
适用场景不同：当参数数量固定时，通常使用 call；当参数数量不固定时，使用 apply 更为方便。

call 和 apply 都用于改变函数执行时的 this 指向。

call 接受参数列表，apply 接受参数数组。

根据参数的数量和形式选择合适的调用方式。

掌握 call 和 apply 的使用，能够让你在 JavaScript 中更加灵活地控制函数的执行上下文，提升代码的复用性和可维护性。

1. 解释 JavaScript 中的原型和原型链

答案：
JavaScript 中的每个对象都有一个原型（prototype），原型也是一个对象，对象可以从原型继承属性和方法。

• 原型：每个函数都有一个 prototype 属性，指向一个对象，这个对象就是该函数的实例的原型
• 原型链：当访问一个对象的属性时，如果对象本身没有这个属性，JavaScript 会沿着原型链向上查找，直到找到该属性或到达原型链的末端（null）

1、react 父组件怎么调用子组件的方法

‌函数组件使用 forwardRef+useImperativeHandle‌：子组件通过useImperativeHandle暴露方法，父组件通过ref调用

目录结构

Vue 2的源码采用典型的模块化结构，主要包含以下核心模块：

• core: 核心代码，包含响应式系统、虚拟DOM、组件系统等
• platforms: 平台特定代码，包括Web和Weex
• compiler: 模板编译器，将模板转换为渲染函数
• server: 服务端渲染相关代码
• sfc: 单文件组件(.vue文件)解析器
• shared: 共享工具函数

一、响应式系统

Vue 2的响应式系统是整个框架的核心，它基于Object.defineProperty实现数据劫持和发布订阅模式。

1.1 数据响应式原理