前端知识体系构建

1.Vue 知识体系

1.1 基础原理1.1.1 Vnode

Vnode也称虚拟node节点,是对真实元素的抽象。诞生的背景是因为前端在很长一段时间通过直接操作Dom来达到修改视图，随着项目庞大，维护就变成一个问题。那换个角度想如果把真实Dom树抽象成为一棵以JS语法构建的抽象，然后通过修改抽象树的结构来转换成真实的Dom来重新渲染到视图。

如何生成虚拟节点？

Vnode如何检测变化并更新视图呢？ diff算法

VNode节点及Vuejs中VNode类的定义

Vue实现的diff原理

1.1.2 nextTick

nextTick目的是将回调函数的调用延迟到下一次dom更新数据后，换句话说就是修改数据后并不会立即更新dom ，因为dom的更新是异步的，无法通过同步代码获取，需要使用nextTick，在下一次事件循环中获取（Vue中Dom的更新是异步的）

this.msg = “Hello world.” this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …is.msg2 = this.refs.msgDiv.innerHTML }) this.msg3 = this.$refs.msgDiv.innerHTML

1.1.3 MVVM

MVVM全称为：Model-View-View-Model，诞生背景是在传统的MVC架构中，缺少一个数据解析的角色，而M、V、C等都不应该处理数据解析，于是专门为数据解析的就诞生了一个新的类：ViewModel，主要用于将Model和View关联起来，数据变化更新视图，视图变化更新数据

1.1.4 双向绑定原理

上一节提到mvvm,本质上就是vue数据双向绑定，它是通过数据劫持结合设计模式中的发布者-订阅者模式，主要包括以下步骤

1.将数据data变成可观察： 通过 Object.defineProperty()设置属性的setter和getter来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，关于更多的Object.defineProperty()实践可以阅读 树酱的如何更好管理 Api 接口 中有提到 （ Vue3.0 使用Proxy替代）

2.添加订阅者Watcher和添加消息订阅器Dep（ 如果数据变化，通知所有订阅者）

3.实现Compile

基于 Proxy 的观察者机制探索

1.1.5 Vue相关的API

Vue暴露一些常用的API，包括全局、生命周期、组合、实例property等API，可以查看vue官方所有API集合文档

全局 API ：比如 Vue.use( plugin )用于全局引用插件, 具体使用可阅读树酱的

组合 API: 比如 project/inject 用于允许祖先组件向其所有子孙后代注入一个依赖

实例property API: 比如vm.$refs 获取持有注册过ref属性的所有 DOM 元素和组件实例

你或许不知道Vue的这些小技巧

1.2 vuex 状态管理

Vuex 是一个专为 Vue.js 应用开发的状态管理工具，采用集中式的存储方法来记录组件的状态，用一个对象就包含了全部的应用层级状态，而每个应用将仅仅包含一个 store 实例，但是可以用模块化来管理区分

1.2.1 模块化状态化管理

由于vuex的单一状态树，会导致说随着应用庞大，应用要管理状态集合会很大，store 对象就会显得臃肿，难以管理，那就需要用到Module区分，每个Module都拥有自己的 state、mutation、action、getter

1.2.2 持久化管理

我们可以使用状态持久化来实现缓存状态，因为vuex的数据是存放在内存中，当我们刷新页面的时候，内存会被删除，如果我们想持久化存储一些数据，就需要依赖 localstorge或者vuex-persistedstate

手动利用HTML5的本地存储（localstorge）

使用vuex-persistedstate插件

注意: 默认情况下每次 commit 都会向 localstorage 写入数据，localstorage 写入是同步的，这样对性能存在影响，应该分场景尽量避免频繁写入持久化数据。

1.2.3 vuex 五种属性

state：vuex的基本数据，用来存储变量

getter：从基本数据(state)派生的数据，相当于state的计算属性

mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。

action：Action 提交的是 mutation，并且可以包含任意异步操作，但不能直接变更状态

modules：1.2.1 章节提到的vuex模块化

1.3 vue-router

SPA应用大多由前端路由来控制页面的跳转，通过url的切换，在不请求服务器的前提，更新页面视图，vue应用离不开vue-router,涉及知识内容包括以下几点

hash模式和history模式有什么不同？

路由拦截应该怎么做？

路由如何实现模块化管理？

keep-alive如何对组件进行缓存？

前端路由那些事

vue 路由 按需 keep-alive

1.4 组件开发

Vue组件开发是为了通过从业务代码中解耦出代码复用率高的片段，抽出并封装为高复用的组件、涉及知识内容包括以下几点

Vue 组件的三个重要因是什么？ props、事件 和 slots

组件间是如何通信的？

Vue组件化之插槽slot如何使用？

mixin 在组件中可以起到什么作用？

Vue高阶组件是什么？

1.4.1 组件间通信和传值

Vue组件的通信可以是：子父关系，也可以是子祖关系、兄弟关系。不同的的关系也就意味方式不同，主要包括以下几种方式：

$parent与$children

$emit

bus $eventBus: 事件总线，通过emit和gif on来完成传递接收

provide与inject

props 与 $refs

1.4.2 Slot 插槽

来自Vue官方介绍：slot元素作为承载分发内容的出口，简单理解就是“占坑”，子组件预先把位置占好，然后根据业务场景需要，子组件在编写相应的

1.4.3 Mixin 混入

mixin提供了一种非常灵活的方式，可以用来分发Vue组件中的可复用功能，借助Mixin多个组件可以共享数据和方法。同时引入mixin的组件，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数也将会在两个都被调用（Mixin中的钩子会先执行）

1.4.4 高阶组件

高阶组件也称为HOC，它被描述为一种在组件之间共享公共功能而不需要重复代码的方法。作用在于增强组件的功能，简单定义就是：你向一个方法传入组件，然后返回一个新的组件，这就是一个HOC

探索Vue高阶组件

Vue HOC 高阶组件 实践

1.5 axios

应用离不开请求库，而vue技术栈中请求库谈及最多的，非axios莫属，axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，涉及知识内容包括以下几点

axios 如何做二次封装（拦截器）？

如何结合axios做API管理 ？

axios 如何取消请求？

token过期如何在axios刷新？

封装 axios 拦截器实现用户无感刷新 access_token

1.6 vue-cli

vue-cli是vue官方的脚手架，可以使用Vue-cli来快速构建项目，且对 Babel、TypeScript、ESLint、单元测试等提供了开箱即用的支持，简化了部署、打包、代码扫描、单元测试等流程，涉及知识内容包括以下几点

如何基于vue-cli部署项目？

如何配置vue.config.js 打包性能最佳应用？

本地开发跨域如何解决？

1.6.1 vue-cli 部署项目

前端部署离不开几个环境包括本地、mock、开发、测试、预生产、生产等等，需要根据不同环境定义不同的配置文件（管理api等），还需要定义好编译脚本（packjson中的scripts），还需要注意publicpath的定义是否需要修改❞

1.6.2 配置最佳打包

前端SPA应用上线服务器本质上是编译好的静态资源上传，那编译打包就是影响性能较大的因素，那么如何配置vue.config.js打包性能最佳，可以阅读第4节的webpack配置插件，主要解决这几个问题

针对请求数进行优化: (去除prefetch)

公用代码提取，使用cdn加载: (config.externals)

配置代码压缩

1.6.3 本地开发devServer

本地开发中存在跨域问题？我们可以通过vue.config.js中devServer配置来做反响代理解决！如何做？看下面这篇

2.工程化知识体系

关于前端工程化，本质上是通过规范和工具来提高前端应用质量

2.1 Git

众所周知，git不单单只是代码管理工具，还可以做分支管理、commit message检验、Pull Request等

2.2 Npm

只会npm install? npm其实提供很多功能包括如下几个常用的

npm publish ：发包管理

npm link ：用来在本地项目和本地npm模块之间建立连接，可以在本地进行模块测试

13 个 npm 快速开发技巧

2.3 构建工具

前端项目构建工具很多包括Rollup、Webpack、Parcel，然而最近在Vue.js 3.0 Beta里，尤大大提到他在做的这个小工具 vite，关于vite是否能替代wepack？

Webpack：适⽤于⼤型项目构建：webpack目前生态最完善，应用场景更多，社区人气高，有强⼤的loader和插件⽣态

Rollup：适⽤于工具库的打包: 可以将各个模块打包进⼀个⽂件中，具备 Tree-shaking 来删除⽆⽤的代码,降低代码体积,但是不具备webpack强大的插件生态，定位更适用于聚焦于库的打包

Parcel：适⽤于试验: 虽然无配置的优势，可以快速打包应用，且打包效率，但是不具备Tree-shaking，导致输出文件偏大

2.4 CI/CD 和项目部署

自从有了DevOps，持续集成，持续交付（CI/CD）成了项目部署主流，前端SPA项目部署需要打包应用，我们可以结合 Jenkins + Docker + Nginx 来完成，如果是SSR应用还需要用PM2来管理进程

3 Node知识体系

4.性能优化4.1 性能指标

性能指标是用来通过获取数据来衡量应用的性能，并通过数据来体现出性能的好坏，常用的性能指标有以下几种

我们也可以通过lighthouse这个工具来测试下我们当前的应用

FCP: 首次内容绘制

FMP:首次有效绘制

TTI：首次可交互时间

下通过页面一个手机页面加载截图来帮助我们理解性能指标时间点所带来的体验

4.2 webpack4.2.1 代码分割

在业务场景中，项目中可能会引入很多第三方库，这些库可能跟业务无关且内容也可能不变，如果都打包到一起，那么用户通过浏览器想要浏览最新效果就必须重新执行完新的文件，如果能把不变的代码都单独打成一个文件，且文件名每次都一样。那么浏览器可以从缓存中读取，而不是重新发起请求，或者将公共部分去重，那这个时候代码分割就起了个重要的作用

更多查看