前端技术全复习

1、CSS3 篇

CSS 布局
CSS3 新特性：选择器、过渡、动画 ss
CSS 选择器及其优先级问题
CSS 布局定位属性

2、JavaScript 与 ES6

JavaScript 教程
TS 基础教程
推荐阅读书籍：《JavaScript 语言精粹》《你不知道的 JavaScript 秘密》《图解 HTTP》
垃圾回收
JS 对象：深浅复制、堆栈
面向对象编程：new、contructor、ES6 类
JS 数据类型
函数式编程：词法环境、作用域链、闭包、递归、变量提升
原型继承：proto、prototype、extends
JS 异步编程：Promise、Generator、async
ES6 新特性：Proxy、Reflect、装饰器
DOM 操作：jQuery
JS 事件：DOM 事件级别、事件委托
事件循环：宏任务、微任务
Window 与 BOM：File、WebSocket、Worker
AJAX：XHR、HTTP、TCP、jsonp、前端安全
TypeScript：类型、面向对象
数据结构
算法：经典排序算法
设计模式：23 种设计模式

3、Vue 全家桶

声明式（入门）
- 常用与自定义指定
- 响应式原理
组件化（深入）
- 生命周期与每个阶段发生的事儿
- 虚拟 DOM、Diff 运算
- 计算属性、监听器
- v-bind、v-on、v-slot
- 全局与局部：过滤器、组件、混入、指令
- v-model 封装类表单
- 组件之间的通信方案（至少 6 种）
Vue 工程化
- @vue/cli、vue.config.js
- vue-loader、自主搭建 Vue 环境（webpack、babel、eslint）
- vue-router（路由匹配规则、router-view、嵌套视图、路由守卫、路由元信息）
- vuex（五大概念、工作流程）
- vue 组件库：vant、element、ant-design-vue
- Vue-Element-Admin 系统
- 云服务部署
- 各种第三方库（轮子）的集成
Vue 进阶（高级）
- vue3.0 项目实战（@vue/cli、vite）
- vue2.0 源码
- vuex 源码、vue-router 源码
- element 源码
- element 二次封装、业务组件封装
- 自己搭建 vue 架构（管理系统、webapp）
- vue 生态环境多溜达、保持敏感度
- 服务端渲染 Nuxt、Node
第 1 定：第一步听明白面试官在问什么？如果没听明白，一定要再回问。
第 2 定：马上开始思考，怎么用三句话（并列、递进、顺承）。
第 3 定：回答时，一定要把面试官想听到的答案给它，然后做适当的引导。

4、React 全家桶

React 工程化
- Webpack 环境（*）
  如何理解 wepback？什么是 Loader？什么是 plugin？
  有哪些打包优化策略？有哪些运行加速策略？
  如何构建多页面应用？本地服务？代理？
  代码分割（异步加载原理）？
  Babel，常用的预设、插件？
  eslint
- create-react-app（npm run eject）
- dva（6 个 api）
- umi（基于 dva，零 api，配置式的）
- ant-design-pro（基于 umi 的）
React 面试
- JSX
- React 有哪些定义组件的方式
- 生命周期
- setState((state,props)=>({}), callback) 异步和同步，新值是否与旧值，diff 运算，render()
- props
- 状态提升
- 组合，不是继承
- 事件绑定
- 受控表单、文件上传是非受控
- 高阶组件
- 上下文
- 代码分割（React-Router）
- Hooks API
- React-Router-Dom（v5 版本、v4 版本）
- Mobx + Mobx-React
- Redux + React-Redux（非常重要）
- Antd 的使用
React 进阶（源码分析篇）
- React、react-dom 源码
- React-Router-Dom 源码
- Redux、React-Redux、Redux-Thunk、Redux-Saga 源码
- Mobx、Mobx-React 源码
- Ant-Design 源码、造轮子
- 深入学习 Webpack 底层原理

5、源码分析方法

1、中级偏上的开发水平：概念术语、基本实现思路
下载或拿到到源码、最好使用 build 后的单个文件进行阅读，从头到尾慢慢看，混个眼熟。（建议 5 遍以上） - Vue 源码分析的四大核心：compiler 编译器、响应式流程（Vnode, Watcher、Dep、Observer）、diff 运算、各种 API 的实现(指令、内置 API)。【使用 performane 控制台可以更好地研究 vue 代码的运行过程】
-> .vue 【使用 webpack、vue-loader、vue-template-compiler 等工具把.vue 转化成 vue 环境能识别的 ES5 代码】
-> template 字符串（包含有各种 vue 指令）进入 Vue 环境
-> new Vue() 进入 vue 运行环境（在浏览器中）
-> data 数据劫持，
-> AST 抽象语法树（某种程度你可以理解成虚拟 DOM）【在 vue 环境中，compiler 把 template 字符串编译成 AST】
-> 虚拟 DOM【_render 方法根据 AST 生成虚拟 DOM，保存在内存中】
-> 生成真实的 DOM【patch】【Watcher 更新视图】
-> 当前组件视图中发生 data 变化时【patch(oldVnode, vnode)，收集脏节点的集合，返回 diff 之后的 vnode】【Watcher 更新视图】
-> 当前组合被销毁时（比如路由切换）【Dep 中响应依赖清除、Watcher 卸载、Vnode 中移除当前的组件节点……】

2、高级的开发水平：整体流程，搞懂局部细节
使用 src 源码进行分析，模块与模块的关系。
3、高级中高级：掌握思想，评价关键问题
模仿、优化、整合自己的思想智慧，做出符合时代或工作场景的框架。