iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
自我挑戰組

30 天 vueuse 原始碼閱讀與實作 系列

透過 30 天閱讀 vueuse 原始碼,找幾個有興趣的 API 來看實作方式並跟著實作一次,來學習原始碼的設計以及其他未知的領域

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day 1] Intro

為什麼挑這個主題 從擔任前端工程師到現在約三年工作經驗,回想這些年,除了工作上少數時間遇到套件的 bug 會到原始碼中找原因,幾乎沒有認真看過自己用的工具的原始...

2024-09-15 ‧ 由 Rhino 分享
DAY 2

[Day 2] useThrottleFn - 序章

官方文件連結:https://vueuse.org/shared/useThrottleFn/ 今天就從 useThrottleFn 開始吧!核心基本上就是熟悉...

2024-09-16 ‧ 由 Rhino 分享
DAY 3

[Day 3] useThrottleFn - 核心邏輯

今天來寫 throttle 的核心邏輯,會先從只處理 fn, delay 參數的版本開始實作,接著加入 trailing, leading 的判斷。另外 vue...

2024-09-17 ‧ 由 Rhino 分享
DAY 4

[Day 4] useThrottleFn - 加入 rejectOnCancel 之前,先來處理 this

在加入 rejectOnCancel 之前,先處理一下 this 的問題,今天主要會調整 Day2 提到的 Wrapper Function & Dem...

2024-09-18 ‧ 由 Rhino 分享
DAY 5

[Day 5] useThrottleFn - Promise & rejectOnCancel

今天要加入 rejectOnCancel 這個參數,會從昨天調整好的 code 繼續,為了方便觀看,可以另開分頁到 Day 4 的最新進度區塊,看最新版本的程式...

2024-09-19 ‧ 由 Rhino 分享
DAY 6

[Day 6] useThrottleFn - unit test & setTimeout 傳入超大負數導致的 bug

今天主要會講 useThrottleFn 的 unit test,另外還有一個關於 setTimeout 的 bug 也會一起解決~ setTimeout -...

2024-09-20 ‧ 由 Rhino 分享
DAY 7

[Day 7] useParallax - 序章

官方 Demo:https://vueuse.org/core/useParallax/#demo 個人一直很喜歡視差效果,看到官方 Demo 後,似乎是一個幫...

2024-09-21 ‧ 由 Rhino 分享
DAY 8

[Day 8] useEventListener - 參數介紹 & 核心 tryOnScopeDispose

官方 Demo:https://vueuse.org/core/useEventListener/#useeventlistener 先來說說 useEvent...

2024-09-22 ‧ 由 Rhino 分享
DAY 9

[Day 9] useEventListener - 主要流程

昨天講了 useEventListener 可以傳入的參數,以及 tryOnScopeDispose 如何做到在組件註銷前,執行我們傳給 tryOnScopeD...

2024-09-23 ‧ 由 Rhino 分享
DAY 10

[Day 10] useEventListener - unit test

今天來講 useEventListener 的單元測試,大部分是針對傳入不同型別的參數做的測試。相關說明會放在程式碼註解中,如果有遇到需要描述更多的會再放到程式...

2024-09-24 ‧ 由 Rhino 分享