iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
JavaScript

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

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

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

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

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

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

Day 21: SOLID - 單一職責原則(SRP) 和 Vue的元件開發

感謝大家陪伴來到最後的10天,不管有沒有參賽,能走到這裡真的非常不容易!希望最後這段時間,我能帶給大家一點不同的程式設計上面的思維,雖然看起來可能跟要原本要介紹...

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

Day 22: SOLID - 開放封閉原則(OCP) 和 Vue的元件開發

今天來到認識另一個SOLID設計準則-開放封閉原則(OCP),老實說寫起來比較沒把握,因為大部分的探討資源大多是針對class物件去作延展探討,或是國外以Rea...

2024-10-05 ‧ 由 Rafael 分享
DAY 23

Day 23: SOLID - 里式替換原則(LSP) 和 Vue的組合式函式擴充

本篇要介紹 SOLID 的第三個原則- Liskov Substitution Principle,里氏替換原則(LSP),老實說相關參考討論的資源,主要是針對...

2024-10-06 ‧ 由 Rafael 分享
DAY 24

Day 24: SOLID - 介面分離原則(ISP) 和 Vue 的動態元件切換

今天要介紹SOLID的第四篇- 介面分離原則(Interface Segregation Principle, ISP),一開始第一次學習接觸會覺得SOLID這...

2024-10-07 ‧ 由 Rafael 分享
DAY 25

Day 25: SOLID - 依賴反轉原則(DIP) 和 Vue 的依賴注入模式

今天要介紹 SOLID 設計準則的最後一個 依賴反轉原則(Dependency Inversion Principle, DIP),我覺得是一個光看定義不太好懂...

2024-10-08 ‧ 由 Rafael 分享
DAY 26

Day 26: JavaScript 的錯誤處理和 Vue元件錯誤捕捉 - onErrorCaptured

昨天結束了5天的SOLID設計之旅,今天來回歸到 JavaScript 一些沒注意的觀念吧~~。 今天要聊的是錯誤處理,讓開發者能夠在程式發生錯誤時作出即時反應...

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

Day 27: JavaScript 模組(module) 和 Vue的程式碼分割 (code spliting)

終於來到鐵人賽的倒數第4天,今天要介紹 JavaScript 滿常見的 動態載入(Dynamic import),是基於JavaScript 模組(module...

2024-10-10 ‧ 由 Rafael 分享
DAY 28

Day 28: Vue 的元件更新優化-重新渲染問題 (Re-render)

今天要來談談 Vue官網效能優化 的部分,昨天我們複習了使用 JavaScript 動態載入 的特性來進行程式碼分割,這種方法將程式碼拆分成不同檔案,減少了初次...

2024-10-11 ‧ 由 Rafael 分享
DAY 29

Day 29: Vue 的不同渲染模式 - CSR、SSR和通用渲染模式

Vue可以用來構建單頁應用程式 (SPA),打包後的程式碼會完全在瀏覽器上執行,透過 JavaScript 生成 DOM 元素並交由瀏覽器進行呈現(Client...

2024-10-12 ‧ 由 Rafael 分享
DAY 30

Day 30: 完賽 - Vue 的 30天自我學習旅程回顧

終於來到了終點線第30天了~有陪伴到這裡看完任何一篇的你們都很棒,感謝妳(你)們的耐心閱讀,今天可以不用聊嚴肅的話題(誤?),不過還是回顧一下過程中,那些比較特...

2024-10-13 ‧ 由 Rafael 分享