個人掘金前端週刊 第七週 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行代碼一個可多實例化的經過訂閱發佈類，原來如此簡單，其原理是什麼，能夠觀賞一波。

寫在最後

寫做不易，你的一讚一評，就是我前行的最大動力。