iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
JavaScript

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

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

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

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

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

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

Day 11: Vue的nextTick-DOM更新後的回調

在 Vue 的資料更新上次有稍微提過,DOM 更新是非同步且以批次處理的方式進行的。 這個機制的目的是為了提高效能,當你修改資料時,Vue 不會立刻更新 DOM...

2024-09-24 ‧ 由 Rafael 分享
DAY 12

Day 12: Vue 監聽器副作用的清除

上次有提到watch或watchEffect可以讓我們監聽饗應式數據,並且執行某些副作用(side effect),自己實務上常利用是監聽某項數值,例如監測使用...

2024-09-25 ‧ 由 Rafael 分享
DAY 13

Day 13: Vue元件的事件emits和參數props傳遞

今天要開始進入認識Vue元件的部分,元件間的溝通是應用中非常重要的一部分,開始允許各個元件之間資料進行互動,今天來看看基礎的元件資料傳遞有那一些細節和當初沒想過...

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

Day 14: Vue 元件Props和響應式物件資料的驗證(customRef)

昨天認識了Vue元件彼此溝通傳遞時,一定會用到的props參數,主要功能是將父組件的資料由上至下傳入子組件渲染。 不過,開發實務上比較頭疼的是,有可能在專案規模...

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

Day 15: Vue-插槽(slot)的認識、slot props的實際案例

前兩篇對我們大概知道元件可以接受 props,而 props 通常是 JavaScript 資料型別(物件或一般型別)。 但在某些情況下,我們可能會希望將一段模...

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

Day 16: Vue的無渲染元件 - slot props 的另一種常見用法

在昨天寫完文章時,更加認識了Vue的slot插槽和當初不太理解的slot props用法,後來翻了一下Vue的設計模式(Vue Pattern)文章,有提到無渲...

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

Day 17: Vue-非受控元件認識、列表渲染(v-for)的陷阱

上次介紹插槽時有看到v-for渲染的案例,v-for是Vue官方提供的列表渲染(List rendering)指令之一,可以用來遍歷陣列或對象,在模板中生成一组...

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

Day 18: JavaScript 工廠函式 和 類別(class)

終於來到鐵人賽的後半段囉~給自己一點鼓勵! 前半段都在理解和複習Vue的一些使用上的觀念和陷阱,接下來希望能複習一些基本JavaScript觀念,讓我們可以慢慢...

2024-10-01 ‧ 由 Rafael 分享
DAY 19

Day 19: Vue - 組合式邏輯概念 (Vue composable concept)

昨天複習了工廠函式,今天來連結到Vue滿常見的設計模式-組合式邏輯(Composable)。 Composable 是一個相對通俗的概念,通常指的是可以在多個元...

2024-10-02 ‧ 由 Rafael 分享
DAY 20

Day 20: Vue - 依賴注入模式(provide/inject) 和 pinia 使用介紹

在前面的章節當中我們應該對元件props/emits有一定掌握,不過在Vue中元件間的關係可能不只有上下層父子關係,在元件粒度切分比較細時,會有事件或參數(pr...

2024-10-03 ‧ 由 Rafael 分享