很開心，已經堅持第27天...

Experience is the mother of wisdom.
經驗為智慧之母。/ 不經一事，不長一智。

PrimeVue 提供了一個簡單易用的 元件，該元件可以用來顯示操作的進度。

今天直接進入正題...
直接到官網看範例，

這是進度的範例。每隔兩秒隨機增加，進度達到 100% 時會有完成通知。

下面為進度條更新邏輯～

組件使用生命週期

<script setup>
....

// 在組件掛載時啟動進度條更新
onMounted(() => {
    startProgress();
});

// 在組件卸載前停止進度條更新
onBeforeUnmount(() => {
    endProgress();
});

...
</script>

＊　onMounted：
當組件掛載到 DOM 時，調用 startProgress() 函數，開始更新進度條。
＊　onBeforeUnmount ：
當組件從 DOM 中移除之前，調用 endProgress() 函數，清除計時器防止內存洩漏。

啟動進度更新

const startProgress = () => {
    interval.value = setInterval(() => {
        let newValue = value1.value + Math.floor(Math.random() * 10) + 1;
        if (newValue >= 100) {
            newValue = 100;
            toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
        }
        value1.value = newValue;
    }, 2000);
};

• setInterval:
  每兩秒調用一次匿名函數，將進度條的值隨機增加 1 到 10 之間的數字。
• 進度值（newValue）達到 100，使用 toast.add 顯示成功通知。
• 新的值賦予 value1，從而觸發進度條更新。

停止進度更新

const endProgress = () => {
    clearInterval(interval.value); // 清除計時器
    interval.value = null;         // 重置計時器變量
};

• clearInterval:
  　停止計時器，防止進度條在組件卸載後繼續更新。
• interval.value = null:
  　清空計時器引用，防止意外的再次啟動。

以上功能， 適合用到上傳文件、等待等功能。
快到尾聲了～繼續加油！明天見～

參考資料:
https://v3.primevue.org/progressbar/