iT邦幫忙

鐵人檔案

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

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

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

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

[Day 11] useMouse - 基本功能

官方 Demo:https://vueuse.org/core/useMouse/ 先拔掉幾個參數,實作一個簡易版本,之後再把其餘參數 & 功能新增進來...

2024-09-25 ‧ 由 Rhino 分享
DAY 12

[Day 12] useMouse - 加入其他參數 & 功能

今天繼續實作 useMouse,讓他的功能更完整,可以搭配 Day 11 的基本功能實作一起看~ 加入 touch option 昨天有提到,useMouse...

2024-09-26 ‧ 由 Rhino 分享
DAY 13

[Day 13] useMouseInElement

官方 Demo:https://vueuse.org/core/useMouseInElement/#usemouseinelement 看到 Demo 中有...

2024-09-27 ‧ 由 Rhino 分享
DAY 14

[Day 14] useMounted & useSupported

本來預計今天要寫 useDeviceOrientation,但發現 useDeviceOrientation 有用到 useSupported,而 useSup...

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

[Day 15] useDeviceOrientation & useScreenOrientation

這兩個 API 都跟行動裝置有關,先從 useDeviceOrientation 開始吧~ useDeviceOrientation 官方 Demo:https...

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

[Day 16] useParallax - source code

今天先看原始碼的部分,Demo 那個有趣的特效,明天來實做看看~ 官方 Demo:https://vueuse.org/core/useParallax/#us...

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

[Day 17] useParallax - 官網文件 Demo 效果實作

為了這個簡單有趣的效果,從 Day7 一路寫到現在 Day17 也是滿妙的,太小看這個 API 了 XD 官方 Demo:https://vueuse.org/...

2024-10-01 ‧ 由 Rhino 分享
DAY 18

[Day 18] useDebounceFn

鐵人賽一開始是用 useThrottleFn 起手,原本接下來打算寫 useDebounceFn,但因為性質太像有點膩 XD,於是轉而去研究 useParall...

2024-10-02 ‧ 由 Rhino 分享
DAY 19

[Day 19] useDebounceFn - unit test

今天來看 useDebounceFn API 相關的單元測試~ 測試架構 // src/utils/filter.test.js import { ref }...

2024-10-03 ‧ 由 Rhino 分享
DAY 20

[Day 20] useScroll - X position, Y position

官方 Demo:https://vueuse.org/core/useScroll/#usescroll 這個 API 原始碼有點長,會先盡量依照功能拆分出來看...

2024-10-04 ‧ 由 Rhino 分享