2025-03-02-Vue 中如何 **統一管理並釋放 Blob URL 資源

一步步了解在 Vue 中如何 統一管理並釋放 Blob URL 資源，這樣你的應用程式會更穩定、不會記憶體泄漏 💪

---

🎯 目標

當我們在 Vue 中用 URL.createObjectURL() 建立了下載連結，要記得：

• ⚠️ 每次都 記錄建立的 URL
• 🧹 在不需要時 釋放記憶體

---

✅ 作法一：使用 onUnmounted() 清理資源

Vue 提供的 onUnmounted() lifecycle hook，可以在元件被移除時清理資源！

---

✅ 範例：下載 JSON 並確保釋放記憶體

<script setup>
import { ref, onUnmounted } from 'vue'

const apiKey = '你的API'
const url = `https://opendata.cwa.gov.tw/api/v1/rest/datastore/F-C0032-001?Authorization=${apiKey}`

// 記錄 blob URL
const blobUrl = ref(null)

const downloadWeatherJSON = async () => {
  try {
    const response = await fetch(url)
    const data = await response.json()
    const json = JSON.stringify(data)

    // 建立 Blob 並產生 URL
    const blob = new Blob([json], { type: 'application/json' })
    blobUrl.value = URL.createObjectURL(blob)

    const a = document.createElement('a')
    a.href = blobUrl.value
    a.download = 'weather_data.json'
    a.click()
  } catch (error) {
    console.error('❌ 發生錯誤:', error)
  }
}

// 🔁 清理資源
onUnmounted(() => {
  if (blobUrl.value) {
    URL.revokeObjectURL(blobUrl.value)
    console.log('🧹 已釋放 Blob URL 記憶體')
  }
})
</script>

<template>
  <button @click="downloadWeatherJSON">下載天氣 JSON</button>
</template>

---

📌 為什麼這樣設計？

概念	原因
ref(blobUrl)	要追蹤目前建立的 Blob URL，才能記得釋放
onUnmounted()	當元件被卸載時（例如換頁），就能清除記憶體
URL.revokeObjectURL(...)	主動釋放資源，避免佔用記憶體

---

💡 延伸技巧：若有多個 blob，要清多個？

你可以用陣列來管理：

const blobUrls = ref([])

onUnmounted(() => {
  blobUrls.value.forEach(url => URL.revokeObjectURL(url))
})

---

✅ 結語

這種做法可以幫助你：

• 寫出更健壯的 Vue 元件
• 管理「瀏覽器資源」（如 Blob、音訊、影片等）
• 避免記憶體長期佔用，提升效能

---