个人掘金前端周刊 第七周 8月2日-8月8日

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战。

前言

收集一周以内，优秀的前端文章，以便本身和有相似需求的同志，能更高效的学习和成长。若有遗漏，敬请谅解

本文下面的题材默认不会收集： 1. 面试 2. 算法

往期可查看专栏 个人掘金前端周栏, 欢迎关注，更指望你的点赞。

往期推荐

本周看点

1. 日更大军，水文大涨

日更来了，你们冲着全勤奖，要是算上参与了6月征文的奖励，可得6件奖励，确实诱人。

• KG颈椎按摩器时尚语音款4097 *1
• 多元兼容黑色帆布双肩包 *1；
• “将来星乐园”定制积木 *1 ；
• always day 1 连盖陶瓷马克杯 *1
• 掘金T恤 * 1
• 卡通空调毯 * 1

2. 多图系列

X 张图系列，也属于容易火系列。 好比在本周的

• 【建议收藏】8张脑图快速了解Vue组件 | 8月更文挑战
• 多图详解，一次性搞懂Webpack Loader

3. 万文系列

本周万文总结，面试系列很多，却没有出现爆品，着实有些意思。

五星推荐

很遗憾，暂时没有五星推荐的内容。

四星推荐

你可能不知道的动态组件玩法🍉

• 做者： 羽飞
• 赞： 300+
• 推荐指数：★ ★ ★ ★
• 推荐理由：webpack提供了动态加包功能，本文更进一步是动态加载组件，使用了rollup而不是更重的webpack。 每一个步骤看起来彷佛都不难，可是整合成为一个方案，客官，你作获得吗？ 那么，就请精读原本。

从零开始手写一个「开箱即用的大文件分片上传库」

• 做者： 字节跳动ADFE团队
• 赞： 100+
• 推荐指数： ★ ★ ★ ★
• 推荐理由：大文件分片上传，那确定离不开分片上传和合并。 此文覆盖客户端，服务端代码，关键海开源了，拿来用，何如？

多图详解，一次性搞懂Webpack Loader

• 做者： 阿宝哥
• 赞： 300+
• 推荐指数： ★ ★ ★ ★
• 推荐理由：Loader 的本质是什么？Normal Loader 和 Pitching Loader 是什么？Pitching Loader 的做用是什么？ Loader 是如何被加载的？Loader 是如何被运行的？Loader 对象上 raw 属性有什么做用？Loader 函数体中的 this.callback 和 this.async 方法是哪里来的？等等，若有你有一个不明白，就应该点进本文。

前端 debug 的奇淫技巧

• 做者： 字节前端
• 赞： 400+
• 推荐指数： ★ ★ ★ ★
• 推荐理由：debug是程序员回避不掉的问题，如何有效和高效的debug呢，这篇文章能够给你解惑。文章涉及断点，条件断点，日志断点，console.trace, debugger,如何查看SSR渲染内容等等内容。

三星推荐

我给中国🇨🇳奥运🏅数作了数据可视化 ｜ 8月更文挑战

• 做者： Fly
• 赞： 200
• 推荐指数： ★ ★ ★
• 推荐理由： 不借助第三方库，从数据获取，到画坐标，画标尺，画矩形，画动画，一切都显得这么简单。

用技术创造惊喜｜成熟的前端工程师必定要学会亲手制做生日礼物 🎁

• 做者： 寒草
• 赞： 100+
• 推荐指数： ★ ★ ★
• 推荐理由： 用技术带来快乐，用技术表达爱！用前端的技术制做不同的生日礼物，文章主要涉及一些css的技术，值得学习，值得尊敬。

【建议收藏】8张脑图快速了解Vue组件 | 8月更文挑战

• 做者： LBJ
• 赞： 500+
• 推荐指数： ★ ★ ★
• 推荐理由： 8图覆盖注册组件，组件Props,非属性特性，自定义事件，插槽slot, 依赖注入，动态组件和异步组件，模板引入和控制更新。 图嘛，更容易把东西关联起来。

React 中 setState 是一个宏任务仍是微任务？

• 做者： Shenfq
• 赞： 200+
• 推荐指数： ★ ★ ★
• 推荐理由：这个问题的答案，其实通常人都知道的。不过做者给了完整的测试代码和分析，之后React 18的新特性， 值得你们学习一波。

跟着来，你也能够手写VueRouter

• 做者： isboyjc
• 赞： 200+
• 推荐指数： ★ ★ ★
• 推荐理由： 掘金签约做者的做品的特色都是比较详细，通常也是由浅入深。这篇文章首先介绍了路由的基本实现，而后从VueRouter的使用，安装，再进阶到自行的实现，还附送了vue-router源码的解读。

看完还不懂JavaScript执行机制(EventLoop)，你来捶我

• 做者： 沐华
• 赞： ~200
• 推荐指数： ★ ★ ★
• 推荐理由：事件循环的文章，掘金一搜一大把。此文为啥值得推荐，图文并茂，深度合适，读完感受本身有所获。

尤雨溪国外教程：亲手带你写个简易版的Vue！

• 做者： 手撕红黑树
• 赞： 100+
• 推荐指数： ★ ★ ★
• 推荐理由：手写Vue感受已是vue选手必备技能，此文最大看点是Proxy的流程图。

Compose版来啦！仿自如裸眼3D效果

• 做者： 付十一
• 赞： 100+
• 推荐指数： ★ ★ ★
• 推荐理由：既然是裸眼3D，就离不开手机陀螺仪传感器。跟着此文一块儿来实现一个简单版本，有比没有强，对吧。

react hooks 万字总结

• 做者： Jimmy_kiwi
• 赞： 50+
• 推荐指数： ★ ★ ★
• 推荐理由： React Hooks的中文SDK。

【SSD系列】傻傻的，3行代码一个订阅发布中心，不会不知道吧 ｜8月更文挑战

• 做者： 云的世界
• 赞： 200+
• 推荐指数： ★ ★ ★
• 推荐理由：3行代码一个订阅发布中心，6行代码一个可多实例化的经过订阅发布类，原来如此简单，其原理是什么，能够观赏一波。

写在最后

写做不易，你的一赞一评，就是我前行的最大动力。