前端框架及项目面试－聚焦Vue、React、Webpack

**第1章 课程导学** (2节 | 8分钟)

- 1-1 学前必读

- 1-2 框架面试导学 (07:45)

**第2章 课程介绍** (1节 | 20分钟)

- 2-1 先看几个面试题 (19:09)

**第3章 Vue 使用** (20节 | 159分钟)

- 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 原理** (24节 | 220分钟)

- 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 面试真题演练** (7节 | 25分钟)

- 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 学习（新）** (35节 | 361分钟)

- 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 使用** (36节 | 247分钟)

- 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 原理** (12节 | 77分钟)

- 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 面试真题演练** (6节 | 23分钟)

- 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** (29节 | 226分钟)

- 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章 项目设计** (12节 | 71分钟)

- 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章 项目流程** (13节 | 58分钟)

- 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章 课程总结** (1节 | 8分钟)

- 13-1 课程总结 (07:19)

**第14章 react hooks** (19节 | 206分钟)

- 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 后续学习建议

**第15章 TypeScript（2024更新）** (14节 | 145分钟)

- 15-1 章介绍-看几个TS面试题 (13:16)

- 15-2 TS有什么优点和缺点，适应场景是什么 (12:44)

- 15-3 TS的基础类型有哪些，数组和元组有什么区别 (09:10)

- 15-4 【连环问】TS中any void never unknown 的区别是什么 (07:37)

- 15-5 TS的访问修饰符有哪几个 (11:24)

- 15-6 【连环问】TS私有属性#和private有什么区别 (06:08)

- 15-7 TS中type和interface有何区别，如何选择 (14:15)

- 15-8 【连环问】type和interface如何扩展属性 (08:54)

- 15-9 如何理解TS中的泛型 (15:33)

- 15-10 TS中交叉类型和联合类型是什么 (10:14)

- 15-11 TS中有哪些特殊符号，分别是什么意思 (12:22)

- 15-12 TS常见的工具类型有哪些 (09:50)

- 15-13 TS如何扩展window属性，如何扩展对象属性 (04:51)

- 15-14 【连环问】TS中如何定义第三方模块的类型 (08:01)

本课程已完结