Day 46: <KeepAlive> - 組件緩存與優化 (~3 小時)
- 本日目標: 理解
<KeepAlive>的作用，學會如何使用它來緩存組件實例，從而優化應用性能和用戶體驗。 - 所需資源: Vue 3 官方文檔 (
<KeepAlive>): https://cn.vuejs.org/guide/built-ins/keep-alive.html
學習計劃:
-
番茄時鐘 1 (25 分鐘工作 + 5 分鐘休息):
- 內容:
<KeepAlive>簡介及其目的。 - 活動: 閱讀官方文檔中關于
<KeepAlive>的介紹。理解為什么組件緩存是有益的，尤其是在頻繁切換組件（如標簽頁界面）的場景中，它能幫助我們保持組件狀態或避免昂貴的重新渲染。 - 思考:
<KeepAlive>與簡單地使用v-if來顯示/隱藏組件有什么本質區別？ - 休息: 短暫休息，放松一下。
- 內容:
-
番茄時鐘 2 (25 分鐘工作 + 5 分鐘休息):
- 內容:
<KeepAlive>與動態組件的基礎使用。 - 活動: 設置一個簡單的父組件，使用
<component :is="currentComponent">來切換兩到三個簡單的子組件（例如ComponentA.vue,ComponentB.vue）。在不使用<KeepAlive>的情況下，觀察它們在切換時的生命周期鉤子 (onMounted,onUnmounted) 在控制臺的輸出。 - 實踐: 將
<component :is="...">用<KeepAlive>包裹起來。再次觀察控制臺輸出。注意onUnmounted不再在切換時被調用。 - 休息: 快速調整狀態。
- 內容:
-
番茄時鐘 3 (25 分鐘工作 + 5 分鐘休息):
- 內容:
include,exclude,max屬性。 - 活動: 學習
include和exclude屬性，它們通過組件的name屬性來控制哪些組件被緩存。理解max屬性用于限制緩存的實例數量。 - 實踐: 修改你的
<KeepAlive>配置，嘗試使用include（例如，只緩存ComponentA）。然后嘗試exclude。如果你有多個組件，也可以實驗一下max。 - 休息: 短暫放松。
- 內容:
-
番茄時鐘 4 (25 分鐘工作 + 5 分鐘休息):
- 內容:
<KeepAlive>相關的生命周期鉤子 (onActivated,onDeactivated)。 - 活動: 閱讀
onActivated和onDeactivated生命周期鉤子的相關內容。理解這些鉤子是專門為被<KeepAlive>包裹的組件設計的，并在緩存組件被激活/失活時觸發。 - 實踐: 在你被緩存的子組件中添加
onActivated和onDeactivated鉤子，并在其中打印日志信息。切換組件時，觀察控制臺輸出。 - 休息: 補充水分。
- 內容:
-
總結與回顧 (10-15 分鐘):
- 回顧
<KeepAlive>的核心作用和用法。 - 確保你理解
include,exclude,max屬性的工作方式。 - 確認你理解了
onActivated和onDeactivated鉤子的執行時機。
- 回顧
Day 47: <Teleport> - 瞬移組件內容 (~3 小時)
- 本日目標: 學習如何使用
<Teleport>將組件的內容渲染到 DOM 樹的不同位置，脫離組件自身的父子層級關系。 - 所需資源: Vue 3 官方文檔 (
<Teleport>): https://cn.vuejs.org/guide/built-ins/teleport.html
學習計劃:
-
番茄時鐘 1 (25 分鐘工作 + 5 分鐘休息):
- 內容:
<Teleport>簡介及其應用場景。 - 活動: 閱讀官方文檔中關于
<Teleport>的介紹。理解它在哪些場景下有用，比如模態框 (Modals)、通知 (Notifications) 或工具提示 (Tooltips)，當你希望內容在視覺上位于其他所有內容之上（例如，直接在<body>標簽下），但在邏輯上仍由其組件管理時。 - 思考: 相較于常規的組件渲染方式，
<Teleport>解決了哪些問題？ - 休息: 為接下來的實踐做好準備。
- 內容:
-
番茄時鐘 2 (25 分鐘工作 + 5 分鐘休息):
- 內容:
<Teleport>的基礎使用。 - 活動: 在你的
public/index.html文件中，添加一個新的空div元素并為其指定一個 ID (例如，<div id="teleport-target"></div>)。 - 實踐: 創建一個簡單的子組件 (
MyModal.vue)，包含一些內容。用<Teleport to="#teleport-target">包裹其內容。在另一個組件（例如App.vue）中渲染MyModal.vue。觀察在 DOM 結構中，MyModal的內容是否出現在#teleport-target中，即使MyModal在邏輯上是App.vue的子組件。 - 休息: 檢查 DOM 結構以確認。
- 內容:
-
番茄時鐘 3 (25 分鐘工作 + 5 分鐘休息):
- 內容:
<Teleport>與組件狀態的結合。 - 活動: 理解
<Teleport>只移動渲染的 DOM 節點，而不改變組件的邏輯父子關系。組件仍然可以從其實際父組件接收 Props，并向其父組件發出事件。 - 實踐: 在
App.vue中添加一個響應式變量 (isOpen = ref(false)) 和一個按鈕來切換isOpen。使用v-if="isOpen"來條件性渲染MyModal。在MyModal中添加依賴App.vue傳入的 Props 的內容，或者發出事件回傳給App.vue。確認狀態和事件處理仍然按預期工作。 - 休息: 短暫放松。
- 內容:
-
番茄時鐘 4 (25 分鐘工作 + 5 分鐘休息):
- 內容: 同一目標上的多個
<Teleport>和disabled屬性。 - 活動: 了解多個
<Teleport>組件可以掛載到同一個目標元素，它們的內容將按順序追加。理解disabled屬性可以條件性地啟用/禁用傳送功能。 - 實踐: 創建兩個不同的模態框組件，并將它們都傳送到同一個目標。觀察它們的渲染順序。然后，給其中一個或兩個添加
disabled屬性，并切換它，觀察內容從目標元素中出現/消失。 - 休息: 補充能量。
- 內容: 同一目標上的多個
-
總結與回顧 (10-15 分鐘):
- 總結
<Teleport>的主要應用場景。 - 確認你能成功將內容傳送到不同的 DOM 位置，同時保持組件的邏輯。
- 理解
disabled屬性以及多個<Teleport>如何在同一目標上協作。
- 總結
Day 48: <Transition> 與 <TransitionGroup> - 動畫與過渡 (~3 小時)
- 本日目標: 學習如何使用
<Transition>對單個元素/組件應用過渡效果，以及如何使用<TransitionGroup>對列表應用過渡效果，并通過 CSS 類來實現動畫。 - 所需資源:
- Vue 3 官方文檔 (
<Transition>): https://cn.vuejs.org/guide/built-ins/transition.html - Vue 3 官方文檔 (
<TransitionGroup>): https://cn.vuejs.org/guide/built-ins/transition-group.html
- Vue 3 官方文檔 (
學習計劃:
-
番茄時鐘 1 (25 分鐘工作 + 5 分鐘休息):
- 內容:
<Transition>簡介與基礎使用。 - 活動: 閱讀官方文檔中關于
<Transition>的內容。理解它用于對單個元素或組件應用進入/離開過渡。了解 Vue 會應用的六個過渡 CSS 類 (v-enter-from,v-enter-active,v-enter-to,v-leave-from,v-leave-active,v-leave-to)。 - 實踐: 創建一個簡單的元素（例如，一個帶有文本的
div），并使用v-if條件性渲染它。用<Transition>包裹這個元素。添加基本的 CSS 類（例如，v-enter-active,v-leave-active帶有transition屬性），使其能實現淡入/淡出效果。 - 休息: 離開屏幕，放松眼睛。
- 內容:
-
番茄時鐘 2 (25 分鐘工作 + 5 分鐘休息):
- 內容: 自定義
<Transition>類名與模式。 - 活動: 學習如何通過
name屬性自定義過渡類名（例如，<Transition name="fade">會使用fade-enter-active）。理解mode屬性（in-out,out-in）用于管理同時進行的進入/離開過渡。 - 實踐: 給你的
<Transition>添加一個name屬性，并相應地更新你的 CSS 類。當在<Transition>內部使用v-if/v-else切換兩個不同組件時，嘗試使用mode="out-in"。 - 休息: 快速的思維切換。
- 內容: 自定義
-
番茄時鐘 3 (25 分鐘工作 + 5 分鐘休息):
- 內容:
<TransitionGroup>簡介與列表過渡。 - 活動: 閱讀官方文檔中關于
<TransitionGroup>的內容。理解它專門用于對使用v-for渲染的元素列表應用進入/離開/移動過渡。注意它默認會渲染一個包裝元素（<span>），除非你指定了tag屬性。 - 實踐: 創建一個簡單的項目列表（例如，一個字符串數組）。使用
v-for渲染它們。添加按鈕來向列表中添加/刪除項目。 - 休息: 準備進行更多編碼。
- 內容:
-
番茄時鐘 4 (25 分鐘工作 + 5 分鐘休息):
- 內容:
<TransitionGroup>的基礎使用和v-move類。 - 活動: 用
<TransitionGroup>包裹你的v-for列表。理解v-move類，它在列表項重新排序時應用，用于平滑的動畫效果。 - 實踐: 為你的列表添加
v-enter-active,v-leave-active（用于新添加/刪除的項目）和v-move（用于重新排序的項目）的 CSS。當添加、刪除或重新排序項目（例如通過排序數組）時，觀察過渡效果。記住在<TransitionGroup>內部的v-for項中添加:key。 - 休息: 深呼吸。
- 內容:
-
總結與回顧 (10-15 分鐘):
- 總結
<Transition>與<TransitionGroup>的區別和應用場景。 - 確保你理解了相關的核心 CSS 類 (
-enter-from,-enter-active,-enter-to,-leave-from,-leave-active,-leave-to,v-move)。 - 思考這些內置組件如何通過添加視覺效果顯著提升用戶體驗。
- 總結
