前端底层知识体系构建

1.1.4 双向绑定原理

❝

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

❞

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

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

• 3.实现Compile

???拓展阅读：

• Vue响应式原理[9]

• 基于 Proxy 的观察者机制探索[10]

1.1.5 Vue相关的API

❝

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

❞

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

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

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

???拓展阅读：

• 聊聊 Vue 中 provide/inject 的应用[12]

• 你或许不知道Vue的这些小技巧[13]

1.2 vuex 状态管理

❝

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

❞

1.2.1 模块化状态化管理

❝

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

❞

???拓展阅读：

• vue官方：vuex的Module管理[14]

1.2.2 持久化管理

❝

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

❞

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

• 使用vuex-persistedstate插件

???拓展阅读：

• Vuex持久化插件-解决刷新数据消失的问题[15]

注意: 默认情况下每次 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-router可以阅读树酱的 ???前端路由那些事[16]

• vue 路由 按需 keep-alive[17]

1.4 组件开发

❝

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

❞

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

• 组件间是如何通信的？

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

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

• Vue高阶组件是什么？

1.4.1 组件间通信和传值

❝

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

❞

• $parent与 $children

• $emit

• bus $eventBus

• provide与inject

• props 与 $refs

???拓展阅读：

• Vue 组件间通信六种方式[18]

• vue组件通信全揭秘(共7章)[19]

1.4.2 Slot 插槽

❝

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

❞

???拓展阅读：

• 细谈 vue - slot 篇[20]

1.4.3 Mixin 混入

❝

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

❞

更多了解mixin实践可以阅读树酱的 ???组件库源码中这些写法你掌握了吗？[21] 中关于组件库mixin的用法

1.4.4 高阶组件

❝

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

❞

???拓展阅读：

• Vue 进阶必学之高阶组件 HOC[22]

• 探索Vue高阶组件[23]

• Vue HOC 高阶组件 实践[24]

1.5 axios

❝

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

❞

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

• 如何结合axios做API管理 ？

• axios 如何取消请求？

• token过期如何在axios刷新？

关于前三者的学习可以阅读树酱的???如何更好管理 Api 接口[25]

???拓展阅读：

• 聊聊 Vue 中 axios 的封装[26]

• 封装 axios 拦截器实现用户无感刷新 access_token[27]

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的定义是否需要修改

❞

更多了解可以阅读树酱的???基于 Vue-cli 3x的项目部署[28]

???拓展阅读：

• vue官方：环境变量和模式[29]

• publicPath的配置[30]

1.6.2 配置最佳打包

❝

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

❞

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

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

• 配置代码压缩

???拓展阅读：

• 我在项目中是这样配置Vue的[31]

1.6.3 本地开发devServer

❝

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

❞

???拓展阅读：

• vue.config.js中devServer配置[32]

2.工程化知识体系

---

❝

关于前端工程化，本质上是通过规范和工具来提高前端应用质量，树酱在之前曾梳理过，更多了解请阅读 ??? 前端工程化那些事[33]，本文在原来文章的基础上拓展和补充

❞

2.1 Git

❝

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

❞

???拓展阅读：

• 一些Git规则和 Git 工作流[34]

• 优雅的提交你的 Git Commit Message[35]

2.2 Npm

❝

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

❞

• npm publish ：发包管理

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

???拓展阅读：

• vue组件发布npm最佳实践[36]

• 13 个 npm 快速开发技巧[37]

2.3 构建工具

❝

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

❞

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

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

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

???拓展阅读：

• Vite 原理浅析[38]

2.4 CI/CD 和项目部署

❝

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

❞

更多了解可以阅读树酱的???前端运维部署那些事[39]

???拓展阅读：

关于DevOps和工程化系列 推荐 shanyue山月[40]老哥的专栏文章

• 如何使用 docker 部署前端项目[41]

• 前端部署的发展历程[42]

3 Node知识体系

---

❝

树酱之前梳理了两篇关于node的面试官系列，感兴趣的童鞋可以看看面试官问你关于node的那些事（基础篇）[43] 和 面试官问你关于node的那些事（进阶篇）[44]。同时对于node平时工作业务场景少，树酱的node体系也比较小，后期会调整补充，目前可能不太适合高阶的童鞋。

❞

???拓展阅读：

• 有助于理解前端工具的 node 知识[45]

• 一篇文章构建你的 NodeJS 知识体系[46]

4.性能优化

---

4.1 性能指标

❝

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

❞

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

• FCP: 首次内容绘制

• FMP:首次有效绘制

• TTI：首次可交互时间

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

???拓展阅读：

• Lighthouse 测试内幕[47]

• [蚂蚁金服如何把前端性能监控做到极致?] (https://www.infoq.cn/article/Dxa8aM44oz*Lukk5Ufhy)

• 以用户为中心的性能指标【译】[48]

4.2 webpack

4.2.1 代码分割

❝

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

❞

webpack 使用 SplitChunksPlugin去重和分离 chunk，而在vue-cli 3中是在的vue.config.js中只要配置chainWebpack中的splitChunks即可，如下：

???拓展阅读：

❝

引用一句话：代码分割的本质，就是在**“源码直接上线”「和」“打包为唯一的脚本main.bundle.js”**这两种极端方案之间寻找一种更符合实际场景的中间状态，用可接受的服务器性能压力增加来换取更好的用户体验。

❞

• webpack官方：代码分离[49]

4.2.2 UglifyJs 压缩

❝

通过UglifyJSPlugin来对js文件进行压缩，以此减小js文件的大小，加速资源加载速度，但是一般在生产环节开启，因为会拖慢了webpack原本的编译速度

❞

4.2.3  gizp  压缩

❝

我们可以使用compression-webpack-plugin插件进行压缩，相当于gzip的效果

❞

我们在vue-cli 3下的vue.config.js中configureWebpack配置如下：

4.2.4 Tree-shaking

❝

Tree-shaking也叫摇树优化，是webpack 2之后引入原本rollup特有的Tree-shaking。用来将无用代码移除。而tree-shaking 是在 ES6 modules 的静态特性基础上才得以实现的，也就是说只有你使用到 ES6 module  才能使用 tree-shaking

❞

???拓展阅读：

• 如何评价 Webpack 2 新引入的 Tree-shaking 代码优化技术？[50]

4.2.5 webpack-bundle-analyzer

❝

开发中，生产环节或者开发环境我们想对比下，分析报告进行性能优化对比，确定vue项目的性能是否得到完善，可以通过配置webpack-bundle-analyzer插件，他能以图形化的方式展示bundle中所有的模块的构成的各自构成的大小，执行方式：npm run build --report

❞

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
S6 modules 的静态特性基础上才得以实现的，也就是说只有你使用到 ES6 module  才能使用 tree-shaking

❞

???拓展阅读：

• 如何评价 Webpack 2 新引入的 Tree-shaking 代码优化技术？[50]

4.2.5 webpack-bundle-analyzer

❝

开发中，生产环节或者开发环境我们想对比下，分析报告进行性能优化对比，确定vue项目的性能是否得到完善，可以通过配置webpack-bundle-analyzer插件，他能以图形化的方式展示bundle中所有的模块的构成的各自构成的大小，执行方式：npm run build --report

❞

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-G8ZlCW7R-1715885199531)]

[外链图片转存中…(img-0XIYsyO8-1715885199531)]

[外链图片转存中…(img-araEDsnR-1715885199531)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！