前端框架及项目面试－聚焦Vue3ReactWebpack【最新版更新完毕】

前端开发

课程简介

已有 1 人浏览发布 2026-09-15 更新 2026-09-22

这套资料的主题很明确：把 Vue3、React 和 Webpack 三条线放在一起讲，并且落点是面试与项目落地。它的价值不在"看完能写个页面"，而在于帮你把三个经常被割裂开的知识块接起来——框架的运行时行为、工程化的构建配置、以及面试里被追问时的表述方式。如果你手头已经能写业务代码，但面对"为什么这里要这样配""这个 API 换了之后底层发生了什么"答不利索，这份资料值得对着代码过一遍。

技术栈覆盖：不是并列，是互相印证

Vue3 和 React 放在同一份资料里，容易变成两套互不相干的教程。实际看下来更合理的使用方式，是把它们当成同一批问题的两种答案：响应式系统怎么做（Proxy 与依赖收集 vs. 调度与 Fiber）、组件复用怎么抽（组合式 API 与自定义 Hook）、状态更新如何批处理、列表渲染的 key 到底影响什么。带着这种对照去看，收益比单独学一门框架大得多。

Webpack 部分则是把这些框架代码真正跑起来的那一层。loader 与 plugin 的职责边界、entry/output 与代码分割、devServer 的 HMR、生产构建的压缩与缓存策略，这些内容在面试里出现的频率并不低，而且往往是从"你项目里构建慢怎么排查"这类问题切进去的。

项目结构：从单文件到可维护的目录划分

资料里的项目实战不是堆页面，而是走了一遍工程化该有的组织方式：入口与路由的分层、公共组件的抽取粒度、状态管理模块的边界、请求层的封装与拦截、环境变量的区分。这些是能直接迁移到自己项目里的东西——比如把接口调用统一收口到一层，把跨页面的共享状态从组件里挪出来，把构建配置按环境拆开。看的时候建议对照自己手上的项目，逐条问一句"我现在是怎么做的，差距在哪"。

可复用的几个模块

构建配置：多环境区分、按需加载与分包策略、静态资源处理，可直接改造成自己项目的脚手架底稿。
请求与状态层：拦截器、错误统一处理、loading 与重试的写法，属于每个项目都要重写一遍的轮子。
组件抽象：受控组件、插槽/slot 与 render props 的取舍、列表与表单的高频封装。
面试表达：把"我做过什么"翻译成"为什么这么做、换一种做法会怎样"，这部分平时最缺练习。

自学路径建议

不要按顺序一路刷完。更高效的做法是两轮：第一轮快速过一遍，只记下每节解决的具体问题；第二轮挑三个点动手复现——一个完整的小项目（含路由、状态、请求），一份可跑的 Webpack 配置，一组框架对比笔记。复现时故意把配置改错，看报错信息怎么指路，这比看正确写法更能记住原理。

笔记的作用在面试前更明显：把每节的结论整理成一两句话的问答，比如"Vue3 为什么改用 Proxy""Webpack 的 tree shaking 在什么条件下失效"。这些问题在面试里几乎必被问到，临时翻文档容易答得散。

适合谁，不适合谁

适合已经写过一两个前端项目、想补齐工程化短板、并且近期有面试计划的开发者。完全零基础的话，先补 JavaScript 与 DOM 基础再回来看，否则框架部分会变成背 API。另外要提醒的是，工具链更新很快，资料里的版本配置不一定和当前最新一致，重点看思路而不是照抄参数，遇到差异去官方文档核对一遍，这本身就是一次有效练习。

11.webp (125.65 KB, 下载次数: 59) 下载附件   保存到相册 2020-12-10 14:34 上传

课程推荐

《前端框架及项目面试－聚焦Vue3ReactWebpack【最新版更新完毕】》11.webp (125.65 KB, 下载次数: 59) 下载附件   保存到相册 2020-12-10 14:34 上传【技能收获】学完可掌握：Vue / 前端工程化、React 前端。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升面试通过率，适合向中高级运维或架构岗进阶。若你已有一定编程或运维基础，本课程可帮助你在现有技能栈上快速叠加热门方向能力，提升求职时的项目说服力与薪资谈判空间。

视频目录（209 节）

* 1-2 框架面试导学.mp4

* 2-1 先看几个面试题.mp4

* 3-2 先学 vue2 再学 vue3.mp4

* 3-3 vue基本使用part1.mp4

* 3-4 vue基本知识点串讲-part2.mp4

* 3-5 vue父子组件如何通讯.mp4

* 3-6 如何用自定义事件进行vue组件通讯.mp4

* 3-7 vue父子组件生命周期调用顺序.mp4

* 3-8 面试会考察哪些vue高级特性.mp4

* 3-9 vue如何自己实现v-model.mp4

* 3-10 vue组件更新之后如何获取最新DOM.mp4

* 3-11 slot是什么.mp4

* 3-12 vue动态组件是什么.mp4

* 3-13 vue如何异步加载组件.mp4

* 3-14 vue如何缓存组件.mp4

* 3-15 vue组件如何抽离公共逻辑.mp4

* 3-16 vue高级特性知识点小结.mp4

* 3-17 vuex知识点串讲.mp4

* 3-18 vue-router知识点串讲.mp4

* 3-19 vue使用-考点总结和复习.mp4

* 4-2 vue原理-大厂必考.mp4

* 4-3 如何理解MVVM.mp4

* 4-4 监听data变化的核心API是什么.mp4

* 4-5 如何深度监听data变化.mp4

* 4-6 vue如何监听数组变化.mp4

* 4-7 虚拟DOM-面试里的网红.mp4

* 4-8 用过虚拟DOM吗.mp4

* 4-9 虚拟DOM-diff算法概述.mp4

* 4-10 深入diff算法源码-生成vnode.mp4

* 4-11 深入diff算法源码-patch函数.mp4

* 4-12 深入diff算法源码-patchVnode函数.mp4

* 4-13 深入diff算法源码-updateChildren函数.mp4

* 4-14 虚拟DOM-考点总结和复习.mp4

* 4-15 模板编译前置知识点-with语法.mp4

* 4-16 vue模板被编译成什么.mp4

* 4-17 vue组件可用render代替template.mp4

* 4-18 回顾和复习已学的知识点.mp4

* 4-19 vue组件是如何渲染和更新的.mp4

* 4-20 vue组件是异步渲染的.mp4

* 4-21 如何用JS实现hash路由.mp4

* 4-22 如何用JS实现H5 history路由.mp4

* 4-23 vue原理-考点总结和复习.mp4

* 5-2 vue真题演练1-v-for为何使用key.mp4

* 5-3 vue真题演练2-组件data为何是函数.mp4

* 5-4 vue真题演练3-何时使用keep-alive.mp4

* 5-5 vue真题演练4-何时需要使用beforeDestroy.mp4

* 5-6 vue真题演练5-diff算法时间复杂度.mp4

* 5-7 vue真题演练6-vue常见性能优化.mp4

* 6-2 vue3 考点概述.mp4

* 6-3 vue3 对 vue2 有什么优势.mp4

* 6-4 vue3 和 vue2 的生命周期有什么区别.mp4

* 6-5 如何理解Composition API和Options API.mp4

* 6-6 如何理解ref toRef 和 toRefs.mp4

* 6-7 toRef和toRefs如何使用.mp4

* 6-8 ref toRef和toRefs的最佳使用方式.mp4

* 6-9 为什么需要用 ref.mp4

* 6-10 为何ref需要value属性.mp4

* 6-11 为什么需要toRef和toRefs.mp4

* 6-12 vue3升级了哪些重要功能.mp4

* 6-13 Composition API 如何实现逻辑复用.mp4

* 6-14 Vue3如何实现响应式.mp4

* 6-15 Proxy 基本使用.mp4

* 6-16 vue3用Proxy 实现响应式.mp4

* 6-17 v-model参数的用法.mp4

* 6-18 watch和watchEffect的区别.mp4

* 6-19 setup中如何获取组件实例.mp4

* 6-20 什么是PatchFlag.mp4

* 6-21 什么是HoistStatic和CacheHandler.mp4

* 6-22 SSR和Tree-shaking的优化.mp4

* 6-23 Vite 为什么启动非常快.mp4

* 6-24 ES Module 在浏览器中的应用.mp4

* 6-25 Composition API 和 React Hooks 的对比.mp4

* 6-26 vue3考点总结.mp4

* 6-28 【升级】Vue3和JSX-基本使用.mp4

* 6-29 【升级】Vue3和JSX-JSX和template的区别.mp4

* 6-30 【升级】Vue3和JSX-slot的一些问题.mp4

* 6-31 【升级】Vue3和JSX-使用JSX实现slot.mp4

* 6-32 【升级】Vue3和JSX-使用JSX实现作用域slot.mp4

* 6-33 【升级】Vue3-script-setup-基本使用-part1.mp4

* 6-34 【升级】Vue3-script-setup-属性和事件.mp4

* 6-35 【升级】Vue3-script-setup-暴露组件信息defineExpose.mp4

* 7-2 React使用-考点串讲.mp4

* 7-3 关于 React17.mp4

* 7-4 JSX基本知识点串讲.mp4

* 7-5 JSX如何判断条件和渲染列表.mp4

* 7-6 React事件为何bind this.mp4

* 7-7 React 事件和 DOM 事件的区别.mp4

* 7-8 React表单知识点串讲.mp4

* 7-9 React父子组件通讯.mp4

* 7-10 setState为何使用不可变值.mp4

* 7-11 setState是同步还是异步.mp4

* 7-12 setState何时会合并state.mp4

* 7-13 React组件生命周期.mp4

* 7-14 React基本使用-知识点总结和复习.mp4

* 7-15 React函数组件和class组件有何区别.mp4

* 7-16 什么是React非受控组件.mp4

* 7-17 什么场景需要用React Portals.mp4

* 7-18 是否用过React Context.mp4

* 7-19 React如何异步加载组件.mp4

* 7-20 React性能优化-SCU的核心问题在哪里.mp4

* 7-21 React性能优化-SCU默认返回什么.mp4

* 7-22 React性能优化-SCU一定要配合不可变值.mp4

* 7-23 React性能优化-PureComponent和memo.mp4

* 7-24 React性能优化-了解immutable.js.mp4

* 7-25 什么是React高阶组件.mp4

* 7-26 什么是React Render Props.mp4

* 7-27 React高级特性考点总结.mp4

* 7-28 Redux考点串讲.mp4

* 7-29 描述Redux单项数据流.mp4

* 7-30 串讲react-redux知识点.mp4

* 7-31 Redux action如何处理异步.mp4

* 7-32 简述Redux中间件原理.mp4

* 7-33 串讲react-router知识点.mp4

* 7-34 React使用-考点总结.mp4

* 8-2 React原理-考点串讲.mp4

* 8-3 再次回顾不可变值.mp4

* 8-4 vdom和diff是实现React的核心技术.mp4

* 8-5 JSX本质是什么.mp4

* 8-6 说一下 React 的合成事件机制.mp4

* 8-7 说一下React的batchUpdate机制.mp4

* 8-8 简述React事务机制.mp4

* 8-9 说一下React组件渲染和更新的过程.mp4

* 8-10 React-fiber如何优化性能.mp4

* 8-11 React原理-考点总结和复习.mp4

* 9-2 React真题演练-1-组件之间如何通讯.mp4

* 9-3 React真题演练-2-ajax应该放在哪个生命周期.mp4

* 9-4 React真题演练-3-组件公共逻辑如何抽离.mp4

* 9-5 React真题演练-4-React常见性能优化方式.mp4

* 9-6 React真题演练-5-React和Vue的区别.mp4

* 10-2 webpack考点梳理.mp4

* 10-3 使用 webpack5.mp4

* 10-4 webpack基本配置串讲（上）.mp4

* 10-5 webpack基本配置串讲（下）.mp4

* 10-6 webpack如何配置多入口.mp4

* 10-7 webpack如何抽离压缩css文件.mp4

* 10-8 webpack如何抽离公共代码和第三方代码.mp4

* 10-9 webpack如何实现异步加载JS.mp4

* 10-10 module chunk bundle 的区别.mp4

* 10-11 webpack优化构建速度-知识点串讲.mp4

* 10-12 用IngorePlugin忽略无用文件.mp4

* 10-13 happyPack是什么.mp4

* 10-14 webpack如何配置热更新.mp4

* 10-15 何时使用DllPlugin.mp4

* 10-16 webpack优化构建速度-考点总结和复习.mp4

* 10-17 webpack优化产出代码-考点串讲.mp4

* 10-18 什么是Tree-Shaking.mp4

* 10-19 ES Module 和 Commonjs 的区别.mp4

* 10-20 什么是Scope Hosting.mp4

* 10-21 babel基本概念串讲.mp4

* 10-22 babel-polyfill是什么.mp4

* 10-23 babel-polyfill如何按需引入.mp4

* 10-24 babel-runtime是什么.mp4

* 10-25 webpack考点总结和复习.mp4

* 10-26 webpack面试真题-前端代码为何要打包.mp4

* 10-27 webpack面试真题-为何Proxy不能被Polyfill.mp4

* 10-28 webpack面试真题-常见性能优化方法.mp4

* 11-2 面试为何会考察组件和状态设计.mp4

* 11-3 状态设计的思路和要点.mp4

* 11-4 组件设计的思路和要点.mp4

* 11-5 React实现TodoList代码演示.mp4

* 11-6 组件设计和状态设计的总结.mp4

* 11-7 Vue实现购物车-你将如何设计.mp4

* 11-8 Vue实现购物车data如何设计.mp4

* 11-9 Vue实现购物车-组件设计和代码演示.mp4

* 11-10 结合vuex实现购物车.mp4

* 11-11 状态设计和组件设计的考点总结.mp4

* 12-2 面试为何会考察项目流程.mp4

* 12-3 和前端开发相关的项目角色有哪些.mp4

* 12-4 一个完整的项目要分哪些阶段.mp4

* 12-5 评审项目需求时需要注意哪些事项.mp4

* 12-6 如何做好技术方案设计.mp4

* 12-7 如何保证代码质量.mp4

* 12-8 项目过程中PM加需求怎么办.mp4

* 12-9 不要对QA说：我电脑没问题！.mp4

* 12-10 项目上线.mp4

* 12-11 项目沟通的重要性.mp4

* 12-12 项目流程总结.mp4

* 13-1 课程总结.mp4

* 14-1 出几道React-Hooks面试题.mp4

* 14-2 class组件存在哪些问题.mp4

* 14-3 用useState实现state和setState功能.mp4

* 14-4 用useEffect模拟组件生命周期.mp4

* 14-5 用useEffect模拟WillUnMount时的注意事项.mp4

* 14-6 useRef和useContext.mp4

* 14-7 useReducer能代替redux吗.mp4

* 14-8 使用useMemo做性能优化.mp4

* 14-9 使用useCallback做性能优化.mp4

* 14-10 什么是自定义Hook（上）.mp4

* 14-11 什么是自定义Hook（下）.mp4

* 14-12 使用Hooks的两条重要规则.mp4

* 14-13 为何Hooks要依赖于调用顺序？.mp4

* 14-14 class组件逻辑复用有哪些问题.mp4

* 14-15 Hooks组件逻辑复用有哪些好处.mp4

* 14-16 Hooks使用中的几个注意事项.mp4

* 14-17 Hooks面试题解答.mp4

* 15-1 章介绍-看几个TS面试题.mp4

* 15-2 TS有什么优点和缺点，适应场景是什么.mp4

* 15-3 TS的基础类型有哪些，数组和元组有什么区别.mp4

* 15-4 【连环问】TS中any void never unknown 的区别是什么.mp4

* 15-5 TS的访问修饰符有哪几个.mp4

* 15-6 【连环问】TS私有属性#和private有什么区别.mp4

* 15-7 TS中type和interface有何区别，如何选择.mp4

* 15-8 【连环问】type和interface如何扩展属性.mp4

* 15-9 如何理解TS中的泛型.mp4

* 15-10 TS中交叉类型和联合类型是什么.mp4

* 15-11 TS中有哪些特殊符号，分别是什么意思.mp4

* 15-12 TS常见的工具类型有哪些.mp4

* 15-13 TS如何扩展window属性，如何扩展对象属性.mp4

* 15-14 【连环问】TS中如何定义第三方模块的类型-.mp4

课程目录

第1章 课程导学
第2章 课程介绍
第3章 Vue 使用
第4章 Vue 原理
第5章 Vue 面试真题演练
第6章 Vue3 学习（新）
第7章 React 使用
第8章 React 原理
第9章 React 面试真题演练
第10章 webpack 和 babel
第11章 项目设计
第12章 项目流程
第13章 课程总结
第14章 react hooks