為什麼原生 HTML + JavaScript 影片會繼續播放，但 Vue 3 不會？

這個問題的本質不在於「影片」，而在於： DOM 元素是否真的被移除（銷毀）。

一、原生 HTML + JavaScript 的情況

1️⃣ 多數情況只是「隱藏」，不是「刪除」

在原生寫法中，切換分類時常見的做法是：

• 切換 display: none
• 切換 visibility
• 切換 class

例如：

<video id="videoA" src="a.mp4" autoplay></video>

<script>
  // 只是把影片藏起來
  document.getElementById('videoA').style.display = 'none';
</script>

2️⃣ 原生 JavaScript 不會自動管理生命週期

在原生 JS 中，瀏覽器不會幫你推論：

• 這個元素現在不需要了
• 應該停止播放或釋放資源

除非你明確寫：

video.pause();
video.currentTime = 0;
video.remove();

否則影片會照播。

二、為什麼 Vue 3 幾乎不會遇到這個問題？

1️⃣ Vue 是「狀態驅動」的 UI

Vue 會根據狀態決定： 這個 DOM 應不應該存在。

<video
  v-if="currentCategory === 'A'"
  src="a.mp4"
  autoplay
/>

當 currentCategory 改變時：

• 不符合條件的 <video> 會被 unmount
• DOM 節點被移除
• 瀏覽器自動停止播放並釋放資源

2️⃣ Vue 管的是「存在 vs 不存在」

三、注意：v-show 其實跟原生一樣

<video
  v-show="currentCategory === 'A'"
  src="a.mp4"
  autoplay
/>

v-show 的本質是：

display: none;

👉 元素仍存在，影片仍會播放。

四、原生 HTML + JS 的正確處理方式

解法一：切換時手動停止所有影片

document.querySelectorAll('video').forEach(video => {
  video.pause();
  video.currentTime = 0;
});

解法二：直接移除影片節點

video.remove();

解法三：只在需要時建立 DOM（接近 Vue 思維）

切換分類時：

• 建立新的 <video>
• 切走就銷毀