当前位置：首页 > news >正文

端面试题大汇总二

news 2025/8/19 7:33:51

前端面试题大汇总二

以下是 300 道前端面试题中的后 150 道，涵盖前端工程化、主流框架、性能优化、安全、实战场景等多个重要领域，能帮助你全面检验和巩固前端知识。

五、前端工程化（30 题）

本章节涵盖构建工具、模块化开发、版本控制、自动化测试等工程化实践知识

什么是前端工程化？它包含哪些核心环节（如构建、打包、模块化、规范化）？
简述 webpack 的核心概念（如入口 entry、出口 output、 loader、插件 plugin）。
webpack 的 loader 和 plugin 有什么区别？分别有哪些常用的 loader 和 plugin？
如何配置 webpack 实现代码分割（Code Splitting）？常见的代码分割方式有哪些？
webpack 如何处理 CSS 文件？需要哪些 loader 和 plugin（如 css-loader、style-loader、mini-css-extract-plugin）？
什么是 Tree Shaking？webpack 如何实现 Tree Shaking？需要满足什么条件？
简述 webpack 的热模块替换（HMR）的概念及实现原理。
什么是 Vite？它与 webpack 有什么区别（如构建原理、热更新速度）？
Vite 的核心优势是什么？它的构建流程（开发环境和生产环境）是怎样的？
什么是 npm 和 yarn？它们的区别是什么？如何解决依赖冲突？
简述 package.json 文件的作用及常见字段（如 name、version、dependencies、scripts）。
什么是 devDependencies 和 dependencies？它们的区别是什么？如何安装依赖到对应的分类？
什么是 npm scripts？如何在 package.json 中配置和运行 npm scripts？
什么是 ESLint？它的作用是什么？如何在项目中配置 ESLint？
什么是 Prettier？它与 ESLint 有什么区别？如何实现两者的配合使用？
什么是 Git？简述 Git 的常用命令（如 init、add、commit、push、pull、branch、merge）。
Git 的工作区、暂存区、本地仓库、远程仓库之间的关系是什么？
如何解决 Git 的冲突？冲突产生的原因是什么？
什么是 Git Flow？常见的 Git 分支模型（如 master、develop、feature、hotfix）有哪些？
什么是前端模块化？CommonJS、AMD、CMD、ES6 Module 的区别是什么？
为什么需要使用模块化？模块化解决了前端开发中的哪些问题（如命名冲突、代码冗余）？
什么是 TypeScript？它与 JavaScript 有什么区别？TypeScript 的核心特性（如类型系统、接口、泛型）有哪些？
TypeScript 中的基本类型有哪些？如何定义变量的类型（如 let a: number = 1）？
TypeScript 中的接口（Interface）的作用是什么？如何定义和使用接口？
TypeScript 中的泛型（Generic）是什么？它的作用是什么？举例说明泛型的使用。
什么是 PostCSS？它的作用是什么？常见的 PostCSS 插件有哪些（如 autoprefixer、postcss-preset-env）？
什么是 CSS Modules？它的作用是什么？如何在项目中使用 CSS Modules？
简述前端自动化测试的类型（如单元测试、集成测试、E2E 测试）。
常用的前端测试框架有哪些（如 Jest、Mocha、Cypress）？Jest 的核心特性是什么？
什么是 CI/CD（持续集成 / 持续部署）？前端项目中如何配置 CI/CD 流程（如使用 GitHub Actions）？

六、Vue 框架（30 题）

本章节涵盖Vue基础概念、组件通信、生命周期、状态管理、路由等框架核心知识

简述 Vue 的核心特性（如双向绑定、组件化、虚拟 DOM、生命周期）。
Vue 2 和 Vue 3 的主要区别是什么？（如响应式原理、API 风格、性能优化）
Vue 的生命周期钩子函数有哪些？Vue 2 和 Vue 3 的生命周期钩子有什么区别？
Vue 2 的响应式原理是什么？（基于 Object.defineProperty）它有哪些局限性？
Vue 3 的响应式原理是什么？（基于 Proxy）它相比 Vue 2 有哪些优势？
什么是 Vue 的虚拟 DOM？虚拟 DOM 的工作原理是什么？它的优势是什么？
简述 Vue 的模板语法（如插值、指令、过滤器、计算属性）。
Vue 中的 v-bind 指令的作用是什么？如何简写？它可以绑定哪些内容（如属性、样式、类）？
Vue 中的 v-on 指令的作用是什么？如何简写？如何传递事件参数？
什么是 Vue 的计算属性（computed）和侦听器（watch）？它们的区别是什么？使用场景分别是什么？
Vue 中的 v-if 和 v-show 有什么区别？使用场景分别是什么？
Vue 中的 v-for 指令如何使用？如何给 v-for 循环的元素添加唯一 key？key 的作用是什么？
简述 Vue 的组件化思想，组件的定义方式（Vue 2 和 Vue 3）有哪些？
Vue 组件之间的通信方式有哪些？（如 props、 $e mi t 、$ parent、$children、Vuex、Pinia、provide/inject）
什么是 Vue 的 props？props 如何定义、传递和验证？
什么是 Vue 的自定义事件？如何在组件间通过自定义事件传递数据（$emit、v-on）？
什么是 Vuex？Vuex 的核心概念（state、mutations、actions、getters、modules）有哪些？
Vuex 中的 mutations 和 actions 有什么区别？为什么 mutations 必须是同步函数？
什么是 Pinia？它与 Vuex 有什么区别？Pinia 的核心特性是什么？
简述 Vue 的路由（Vue Router）的概念及核心功能（如路由映射、嵌套路由、编程式导航）。
Vue Router 的路由模式（hash 模式和 history 模式）有什么区别？如何配置路由模式？
如何定义 Vue Router 的路由规则？如何实现动态路由（如 /:id）？
Vue Router 中的嵌套路由如何配置和使用？（如 children 属性、router-view 嵌套）
Vue Router 中的编程式导航和声明式导航有什么区别？分别如何实现？
如何实现 Vue Router 的路由守卫？（全局守卫、路由独享守卫、组件内守卫）
Vue 中的插槽（Slot）是什么？它的作用是什么？有哪些类型的插槽（如默认插槽、具名插槽、作用域插槽）？
什么是 Vue 的混入（Mixin）？它的作用是什么？有哪些优缺点？
Vue 3 中的 Composition API 和 Options API 有什么区别？Composition API 的优势是什么？
Vue 3 中的 setup 函数的作用是什么？它的执行时机是什么？
简述 Vue 的性能优化方式（如路由懒加载、组件缓存、虚拟列表、减少重排重绘）。