iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
JavaScript

Vue.js學習中的細節陷阱:30天自我學習指南 系列

希望這系列能夠探討 Vue 的核心概念和常見的誤用陷阱:

包括Vue App運作概念、響應式系統、組合式函式、依賴注入和 v-for 渲染等,以Vue官方文件為開端,找出文章中需要被注意的細節,透過這些內容能夠更獨立地掌握 Vue的開發準則,避免常見錯誤並提高開發效率。

中間部分可能會穿插一些SOLID設計模式,如單一職責原等,透過自我學習和實例說明,讓這些概念能夠升Vue元件開發的靈活性、可維護性和解耦。

有些可能文章資源比較少的案例議題,也善用AI 工具(chat)來輔助學習,提供即時解答和代碼優化建議,搭配學習過程中得到的經驗去做反饋和搜索。

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

Day 1: Vue Create App and Mount

嗨~大家好,我是Rafael,從原本的農業領域轉職剛滿1年,目前在AI數據公司擔任前端工程師。 最近自己籌組的Vue3線上讀書會順利結束了🥳,也剛好是以Vue3...

2024-09-14 ‧ 由 Rafael 分享
DAY 2

Day 2: Vue SFC樣板(Template)和渲染函式(Render Function)

上一篇為了深入Vue開啟了初章,也提到createApp和App mount掛載的宏觀概念,今天來研究官網有蜻蜓點水著墨,但並沒有刻意放在主章節上-Vue te...

2024-09-15 ‧ 由 Rafael 分享
DAY 3

Day 3: <script setup> 語法糖的本質

今天要聊聊Vue3才有的&lt;script setup&gt;語法糖,看官網和許多教學影片都說是很好用的語法糖,又是新的Vue3 組合式API(composi...

2024-09-16 ‧ 由 Rafael 分享
DAY 4

Day 4: JavaScript物件常見的操作方法

前幾天我們都在摸索Vue的一些額外使用上的知識,之後章節會慢慢進入Vue如何做到資料更新。在實務開發中,我們經常依賴各種框架包裝好的API來管理物件或原始型別資...

2024-09-17 ‧ 由 Rafael 分享
DAY 5

Day 5: JavaScript Proxy 和 Vue Reactive響應式系統

上次有提到JS defineProperty(ES5)可以針對物件設定屬性時,同時追加一層攔截器(getter/setter)。 在 Vue 2 中,響應式系統...

2024-09-18 ‧ 由 Rafael 分享
DAY 6

Day 6: Vue 的響應式系統- Ref

接續上一篇著重在Vue響應式系統的reactive() 使用,也理解它主要是針對物件型態資料做響應式資料綁定,今天一口氣來理解另一個Vue提供的響應式資料API...

2024-09-19 ‧ 由 Rafael 分享
DAY 7

Day 7: Vue的計算屬性-Computed

今天要來針對Vue computed 這個API做個簡單紀錄,實務上用法很簡單,官方文件也是簡潔說明,但還是會看到滿多違反原則(anti-pattern)的用法...

2024-09-20 ‧ 由 Rafael 分享
DAY 8

Day 8: Vue的數據監聽器-watch和watchEffect

昨天認識了Vue computed 計算屬性,可以幫助我們對於響應式數據做一些衍伸計算,同時有緩存功能,不過最大主要限制是不能處理一些程式副作用。 今天來談談V...

2024-09-21 ‧ 由 Rafael 分享
DAY 9

Day 9: Vue監聽器的執行時機點

昨天我們接觸到watch、watchEffect,今天繼續來挖掘對Vue還不熟之前我的一些疑問,深入探討研究Vue監聽器,即便實務上已經使用的很熟悉,跟chat...

2024-09-22 ‧ 由 Rafael 分享
DAY 10

Day 10: JavaScript事件循環、宏任務和微任務

昨天已經有接觸到Vue的響應式資料或監聽器批次更新(batch update)過程,用到了事件循環(Event Loop)和非同步特性,是一個對於前端工程師來說...

2024-09-23 ‧ 由 Rafael 分享