vuejs

特点：声明式渲染、组件化构建

开发技能树

1. 组件通讯（prop、Event、Global Event Bus、Vuex）
2. 插槽（普通插槽、作用域插槽）
3. 过渡动画（过渡类名、JavaScript 钩子）
4. DOM 操作
1）操作 css
2）配合原生 js 库使用（如 cube-ui 对 better-scroll 的封装、element-ui 对 popper.js 的封装）
5. 组件封装（就近管理、高复用性、分层设计、灵活扩展）
6. keep-alive（来回切换避免重复渲染）
activated、deactivate
7. 内存泄漏
产生的原因（未清理的定时器、未清理的全局注册自定义事件、未清理的全局注册 DOM 事件）
8. 错误调试
常见错误：
1）深层对象数据访问问题（使用 v-if 判断）
2）对计算属性赋值
3）对 prop 直接修改（使用 emit 派发事件）
4）使用未注册的组件（局部注册、全局注册）
调试工具：
1）chrome 工具、vue-devtools、vConsole
9. 性能优化
1）数据定义（不一定全部定义在 data 中，可以将一些数据挂载到实例上）
2）按需加载（只下载首屏渲染的资源，可以使用异步组件、异步路由来实现）
3）预渲染（减少白屏时间）
4）后编译
10. vuejs 渲染原理
new Vue——init——$mount——compile——render——vnode——patch——DOM
虚拟 DOM（可以实现跨端）
编译过程涉及 AST 树（抽象语法树）(https://segmentfault.com/a/1190000016231512?utm_source=tag-newest)
11. 组件化实现原理
12. 响应式实现原理

源码学习推荐

源码推荐学习：推荐学习 jquery、vue、react 的设计理念和源码架构

前端工程化

1. 脚手架（vue-cli3.0、插件化机制、webpack 配置）
调整 webpack 配置最简单的方式是在 vue.config.js 中的 configureWebpack 选项提供一个对象
2. webpack（module、entry、output、loader、plugin）
[output]：线上运行时需要通过设置的 public path 指向 CDN 地址
[loader]：用于对模块的源代码进行转化
可以手写 loader
常见 loader：babel-loader、style-loader、css-loader、less-loader、file-loader、url-loader、vue-loader
[plugin]：插件比 loader 更加强大，可以帮助用户直接触及到编译过程
打包优化、
3. 开发&部署
需求阶段——开发阶段——联调阶段——上线阶段（推荐增量发布，hash 化资源 / 或灰度发布）

广度知识必知必会

1. HTTP 相关[图解 HTTP]
常见状态码、浏览器缓存、抓包工具（fiddler、charles）
2. 跨域
常见跨域解决方案 (CORS JSONP……)
3. 性能优化[高性能网站建设进阶指南]
性能监测 lighthouse、数据埋点、雅虎军规
4. web 安全
xss、csrf、https
5. 数据结构&算法
栈/队列/树/图
排序/递归
算法设计技巧
6. 浏览器渲染原理
DOM tree + CSSOM tree ——> render tree (layout + painting)
7. 正则表达式[精通正则表达式]
基本语法、匹配原理、使用技巧
8. 设计模式
工厂模式、订阅发布模式、适配器模式……
9. 后端语言
java、php、nodejs……

前端架构

1. 技术选型
1）业务应该选择什么技术栈？
PC toB toC 移动 重交互 游戏 偏显示 电商……
2）选用的技术栈是否靠谱？
持续维护、star、download、社区生态、测试完成度、大公司使用情况、issue 解决情况……
2. 老项目重构
3. 个人成长经验