利用 Lifecycle 特性處理 Data Loading 特效 - daniel-qa/Vue GitHub Wiki

利用 Lifecycle 特性處理 Data Loading 特效

API 請求的網路延遲通常遠大於 DOM 渲染時間。因此，為了提供更好的使用者體驗，應將 isLoading 狀態與 API 請求的完成綁定。

• 在 created 階段：將 isLoading 設為 true 並發出所有 API 請求。

• 在 API 請求完成後（不論成功或失敗）：將 isLoading 設為 false。

這樣做能確保載入畫面精準地覆蓋從資料請求到資料就緒的整個過程，避免使用者看到空白或不完整的畫面。

• Vue 2 生命週期鉤子：created vs. mounted

鉤子	觸發時機	主要用途	備註
created	實例創建後	發起非同步 API 請求	頁面元素尚未生成，適合處理不依賴 DOM 的資料
mounted	掛載到 DOM 後	操作 DOM 元素	頁面結構已存在，適合處理與 DOM 相關的