前端框架及项目面试－聚焦Vue3/React/Webpack

这套资料的主题很集中：前端框架面试，而且是把 Vue3、React、Webpack 放在一起讲。它不教你怎么从零写第一行 HTML，也不负责把你送进大厂，它解决的是一个更具体的场景——你已经能写业务代码，但面试时被问到框架原理、组件通信、响应式实现、打包配置这些题，答得含糊，或者只能背答案却说不出为

单课价¥24.00新品上架

会员价¥4.80开通会员，全站课程按会员价下载套餐详情

137 人关注更新于 2026-09-19 永久有效

发货

网盘链接 · 支付成功后自动发货

保障

永久有效 · 链接失效免费补发

客服

每日 9:00-21:00 在线客服联系客服

购买本课销量 0 · 永久有效

会员价 · 单课标价 ¥24.00

会员 A · 按档位折扣

永久¥9.604折

年¥12.005折

月¥14.406折

周¥16.807折

会员 B

VIP¥4.80低至

SVIP单买¥200 内可领

游客按标价购买，不享受上表折扣。

支付成功后自动发放网盘链接，链接失效可找客服免费补

正版保障极速发货售后无忧

这套资料的主题很集中：前端框架面试，而且是把 Vue3、React、Webpack 放在一起讲。它不教你怎么从零写第一行 HTML，也不负责把你送进大厂，它解决的是一个更具体的场景——你已经能写业务代码，但面试时被问到框架原理、组件通信、响应式实现、打包配置这些题，答得含糊，或者只能背答案却说不出为什么。

先判断自己该不该看

如果你目前只会用框架写页面，被问到「Vue 的响应式是怎么实现的」「React 的 setState 为什么有时是异步的」「Webpack 的 loader 和 plugin 区别在哪」就卡壳，这套资料对口。它假设你已经写过至少一个 Vue 或 React 项目，能看懂组件、生命周期、路由这些基本概念，所以不会花时间解释什么是组件。零基础的人直接进来会吃力，建议先补完一个框架的实战项目再回来看。

另外要摆正预期：这是面试向的梳理，不是官方文档的替代品。它的价值在于把散落的知识点按「面试官会怎么问」重新组织，帮你把会用变成能讲清楚。真正想深入源码，还得自己动手翻。

建议的观看顺序

不要按目录从头顺到尾。先看导学部分，弄清楚这套内容对标的岗位和问题类型，判断是否匹配你当前要面的方向。然后按你主攻的框架选一条线：主投 Vue 的，先把 Vue 使用和原理这两块过一遍，重点看组件通信、响应式、虚拟 DOM 相关的讲解，再看配套的面试真题演练，这部分是把知识点转成答题语言的关键。主投 React 的，同理走 React 使用加原理那条线。Webpack 部分建议放在最后，它是加分项，面试里常以「你项目里怎么配置的」形式出现，理解 loader、plugin、打包优化这几类问题即可，不必一开始就钻进去。

两条框架线都看也可以，但要有主次。面试官更在意你对一个框架的理解深度，而不是两个都浅尝辄止。

学完能独立做什么，资料怎么用

过完一遍，你应该能做到几件事：面对框架相关的面试题，能先讲结论再讲原理，而不是背一段话；能说清 Vue 和 React 在响应式、数据流、更新机制上的差异，并解释各自的设计取舍；能读懂项目里的 Webpack 配置，知道改哪里会影响打包结果。这些是能当场验证的能力，不是模糊的「提升」。

配合练习的方式很简单：每看完一个主题，合上视频，用自己的话把这个问题讲一遍，讲不顺的地方就是没懂的地方。然后回到你手头的项目，找一个对应的真实场景去验证，比如把组件通信方式换一种实现，或者改一次打包配置看产物变化。面试真题部分建议先自己答，再对照讲解找差距，这样比直接看答案有效得多。资料本身按主题分块，适合边看边查，不必一次性刷完。

课程目录

课程介绍 本页收录 前端框架及项目面试－聚焦Vue3/React/Webpack，方向为体系课，重点涉及 Vue、React、前端。 内容涵盖：课程导学、Vue 使用、Vue 原理、Vue 面试真题演练、React 使用、React 原理 等主题。 适合正在补 Vue、React、前端 相关知识、想按目录逐步推进的学习者。 下方为完整资料与目录，可先看目录判断是否符合需要。 第1章 课程导学 1-1 学前必读 1-2 框架面试导学 (07:45) 第2章 课程介绍 2-1 先看几个面试题 (19:09) 第3章 Vue 使用 3-1 章介绍 3-2 先学 vue2 再学 vue3 (12:54) 3-3 vue基本使用part1 (13:34) 3-4 vue基本知识点串讲-part2 (14:28) 3-5 vue父子组件如何通讯 (07:35) 3-6 如何用自定义事件进行vue组件通讯 (06:17) 3-7 vue父子组件生命周期调用顺序 (11:27) 3-8 面试会考察哪些vue高级特性 (05:03) 3-9 vue如何自己实现v-model (06:54) 3-

10 vue组件更新之后如何获取最新DOM (08:52) 3-

11 slot是什么 (11:13) 3-

12 vue 动态组件是什么 (07:27) 3-

13 vue如何异步加载组件 (04:38) 3-

14 vue如何缓存组件 (06:39) 3-

15 vue组件如何抽离公共逻辑 (11:03) 3-

16 vue高级特性知识点小结 (06:19) 3-

17 vuex知识点串讲 (07:02) 3-

18 vue-router知识点串讲 (06:39) 3-

19 vue使用-考点总结和复习 (09:58) 3-

20 【任务】总结 vue 高级特性 第4章 Vue 原理 4-1 章介绍 4-2 vue原理-大厂必考 (15:29) 4-3 如何理解MVVM (11:33) 4-4 监听data变化的核心API是什么 (08:51) 4-5 如何深度监听data变化 (12:31) 4-6 vue如何监听数组变化 (13:16) 4-7 虚拟DOM-面试里的网红 (13:11) 4-8 用过虚拟DOM吗 (18:06) 4-9 虚拟DOM-diff算法概述 (09:42) 4-

10 深入diff算法源码-生成vnode (08:29) 4-

11 深入diff算法源码-patch函数 (06:15) 4-

12 深入diff算法源码-patchVnode函数 (10:44) 4-13 深入diff算法源码-updateChildren函数 (13:01) 4-

14 虚拟DOM-考点总结和复习 (03:18) 4-

15 模板编译前置知识点-with语法 (08:01) 4-

16 vue模板被编译成什么 (22:19) 4-

17 vue组件可用render代替template (04:43) 4-

18 回顾和复习已学的知识点 (05:39) 4-

19 vue组件是如何渲染和更新的 (06:23) 4-

20 vue组件是异步渲染的 (03:29) 4-

21 如何用JS实现hash路由 (08:12) 4-22 如何用JS实现H5 history路由 (10:54) 4-

23 vue原理-考点总结和复习 (05:30) 4-

24 【任务】vnode 之于 Vue 的作用 第5章 Vue 面试真题演练 5-1 章介绍 5-2 vue真题演练1-v-for为何使用key (06:54) 5-3 vue真题演练2-组件data为何是函数 (04:13) 5-4 vue真题演练3-何时使用keep-alive (02:39) 5-5 vue真题演练4-何时需要使用beforeDestroy (02:24) 5-6 vue真题演练5-diff算法时间复杂度 (03:00) 5-7 vue真题演练6-vue常见性能优化 (05:50) 第6章 Vue3 学习（新） 6-1 章介绍 6-2 vue3 考点概述 (13:53) 6-3 vue3 对 vue2 有什么优势 (07:54) 6-4 vue3 和 vue2 的生命周期有什么区别 (13:23) 6-5 如何理解Composition API和Options API (18:32) 6-6 如何理解ref toRef 和 toRefs (12:15) 6-7 toRef和toRefs如何使用 (14:43) 6-8 ref toRef和toRefs的最佳使用方式 (04:29) 6-9 为什么需要用 ref (14:28) 6-

10 为何ref需要value属性 (11:00) 6-

11 为什么需要toRef和toRefs (04:24) 6-12 vue3升级了哪些重要功能 (17:04) 6-

13 Composition API 如何实现逻辑复用 (16:14) 6-14 Vue3如何实现响应式 (06:41) 6-

15 Proxy 基本使用 (16:53) 6-16 vue3用Proxy 实现响应式 (12:22) 6-

17 v-model参数的用法 (11:06) 6-

18 watch和watchEffect的区别 (13:14) 6-

19 setup中如何获取组件实例 (06:22) 6-

20 什么是PatchFlag (12:40) 6-21 什么是HoistStatic和CacheHandler (09:07) 6-

22 SSR和Tree-shaking的优化 (04:00) 6-

23 Vite 为什么启动非常快 (06:35) 6-

24 ES Module 在浏览器中的应用 (12:20) 6-

25 Composition API 和 React Hooks 的对比 (05:32) 6-26 vue3考点总结 (04:53) 6-

27 【任务】Composition API 给 Vue 带来 6-28 【升级】Vue3和JSX-基本使用 (15:34) 6-29 【升级】Vue3和JSX-JSX和template的区别 (15:49) 6-30 【升级】Vue3和JSX-slot的一些问题 (15:41) 6-31 【升级】Vue3和JSX-使用JSX实现slot (07:10) 6-32 【升级】Vue3和JSX-使用JSX实现作用域slot (10:38) 6-33 【升级】Vue3-script-setup-基本使用-part1 (11:57) 6-34 【升级】Vue3-script-setup-属性和事件 (08:04) 6-35 【升级】Vue3-script-setup-暴露组件信息defineExpose (05:59) 第7章 React 使用 7-1 章介绍 7-2 React使用-考点串讲 (09:58) 7-3 关于 React17 (01:03) 7-4 JSX基本知识点串讲 (10:43) 7-5 JSX如何判断条件和渲染列表 (09:16) 7-6 React事件为何bind this (11:14) 7-7 React 事件和 DOM 事件的区别 (08:57) 7-8 React表单知识点串讲 (07:57) 7-9 React父子组件通讯 (08:41) 7-

10 setState为何使用不可变值 (14:44) 7-

11 setState 是同步还是异步 (07:01) 7-

12 setState何时会合并state (07:22) 7-13 React18中setState的变化 (06:25) 7-

14 React组件生命周期 (05:49) 7-

15 React基本使用-知识点总结和复习 (02:50) 7-

16 React函数组件和class组件有何区别 (06:36) 7-

17 什么是React非受控组件 (09:18) 7-

18 什么场景需要用React Portals (05:37) 7-

19 是否用过React Context (12:22) 7-

20 React如何异步加载组件 (07:33) 7-

21 React性能优化-SCU的核心问题在哪里 (06:55) 7-

22 React性能优化-SCU默认返回什么 (08:51) 7-

23 React性能优化-SCU一定要配合不可变值 (09:17) 7-24 React性能优化-PureComponent和memo (03:13) 7-

25 React性能优化-了解immutable.js (03:52) 7-

26 什么是React高阶组件 (12:31) 7-

27 什么是React Render Props (08:55) 7-

28 React高级特性考点总结 (02:24) 7-

29 Redux考点串讲 (03:39) 7-

30 描述Redux单项数据流 (03:22) 7-

31 串讲react-redux知识点 (05:14) 7-

32 Redux action如何处理异步 (03:32) 7-

33 简述Redux中间件原理 (07:07) 7-

34 串讲react-router知识点 (04:02) 7-

35 React使用-考点总结 (10:29) 7-

36 【任务】React 为何需要 SCU ？ 第8章 React 原理 8-1 章介绍 8-2 React原理-考点串讲 (06:04) 8-3 再次回顾不可变值 (03:46) 8-4 vdom和diff是实现React的核心技术 (06:20) 8-5 JSX本质是什么 (20:42) 8-6 说一下 React 的合成事件机制 (10:45) 8-7 说一下React的batchUpdate机制 (10:41) 8-8 简述React事务机制 (02:52) 8-9 说一下React组件渲染和更新的过程 (06:47) 8-

10 React-fiber如何优化性能 (05:43) 8-

11 React原理-考点总结和复习 (03:15) 8-

12 【任务】介绍 React 的 batchUpdate 机制 第9章 React 面试真题演练 9-1 章介绍 9-2 React真题演练-1-组件之间如何通讯 (03:58) 9-3 React真题演练-2-ajax应该放在哪个生命周期 (04:34) 9-4 React真题演练-3-组件公共逻辑如何抽离 (02:15) 9-5 React真题演练-4-React常见性能优化方式 (03:35) 9-6 React真题演练-5-React和Vue的区别 (08:15) 第10章 webpack 和 babel 10-1 章介绍 10-2 webpack考点梳理 (08:38) 10-3 使用 webpack5 (07:02) 10-4 webpack基本配置串讲（上） (12:02) 10-5 webpack基本配置串讲（下） (14:21) 10-6 webpack如何配置多入口 (08:24) 10-7 webpack如何抽离压缩css文件 (09:29) 10-8 webpack如何抽离公共代码和第三方代码 (17:12) 10-9 webpack如何实现异步加载JS (07:11) 10-

10 module chunk bundle 的区别 (04:20) 10-

11 webpack优化构建速度-知识点串讲 (06:24) 10-

12 用IngorePlugin忽略无用文件 (09:10) 10-

13 happyPack是什么 (09:49) 10-

14 webpack如何配置热更新 (10:48) 10-

15 何时使用DllPlugin (12:51) 10-

16 webpack 优化构建速度-考点总结和复习 (03:40) 10-

17 webpack 优化产出代码-考点串讲 (10:09) 10-

18 什么是Tree-Shaking (11:02) 10-

19 ES Module 和 Commonjs 的区别 (04:56) 10-

20 什么是 Scope Hosting? (06:42) 10-

21 babel 基本概念串讲 (08:53) 10-

22 babel-polyfill 是什么? (06:55) 10-

23 babel-polyfill 如何按需引入? (08:12) 10-

24 babel-runtime 是什么? (08:34) 10-

25 webpack考点总结和复习 (03:45) 10-

26 webpack面试真题-前端代码为何要打包 (07:49) 10-27 webpack面试真题-为何Proxy不能被Polyfill (04:09) 10-

28 webpack面试真题-常见性能优化方法 (03:02) 10-

29 【任务】从 0 配置 webpack5 开发环境 第11章 项目设计 11-1 章介绍 11-2 面试为何会考察组件和状态设计 (07:39) 11-3 状态设计的思路和要点 (08:49) 11-4 组件设计的思路和要点 (08:03) 11-5 React实现TodoList代码演示 (07:26) 11-6 组件设计和状态设计的总结 (03:07) 11-7 Vue 实现购物车-你将如何设计 (03:05) 11-8 Vue 实现购物车 data 如何设计 (06:01) 11-9 Vue实现购物车-组件设计和代码演示 (10:25) 11-

10 结合 vuex 实现购物车 (14:08) 11-

11 状态设计和组件设计的考点总结 (02:16) 11-

12 【任务】用 Vue 实现 todo-list 第12章 项目流程 12-1 章介绍 12-2 面试为何会考察项目流程 (10:18) 12-3 和前端开发相关的项目角色有哪些 (04:39) 12-4 一个完整的项目要分哪些阶段 (05:43) 12-5 评审项目需求时需要注意哪些事项 (08:26) 12-6 如何做好技术方案设计 (06:31) 12-7 如何保证代码质量 (05:11) 12-8 项目过程中PM加需求怎么办 (04:07) 12-9 不要对QA说：我电脑没问题！ (04:16) 12-

10 项目上线 (02:14) 12-

11 项目沟通的重要性 (03:27) 12-

12 项目流程总结 (02:13) 12-

13 【任务】自己画一个项目研发流程图 第13章 课程总结 13-1 课程总结 (07:19) 第14章 react hooks 14-1 出几道 React-Hooks 面试题 (09:37) 14-2 class 组件存在哪些问题 (07:37) 14-3 用useState实现state和setState功能 (16:48) 14-4 用 useEffect 模拟组件生命周期 (16:01) 14-5 用useEffect模拟WillUnMount时的注意事项 (18:31) 14-6 useRef和useContext (13:56) 14-7 useReducer能代替redux吗 (08:42) 14-8 使用useMemo做性能优化 (11:26) 14-9 使用useCallback做性能优化 (05:08) 14-

10 什么是自定义Hook（上） (11:09) 14-

11 什么是自定义 Hook（下） (12:33) 14-

12 使用 Hooks 的两条重要规则 (04:58) 14-

13 为何Hooks要依赖于调用顺序？ (11:13) 14-

14 class 组件逻辑复用有哪些问题？ (08:40) 14-

15 Hooks组件逻辑复用有哪些好处 (12:02) 14-

16 Hooks使用中的几个注意事项 (29:55) 14-

17 Hooks 面试题解答 (07:13) 14-

18 【任务】对比 React Hooks 和 Vue3 Comp 14-19 后续学习建议