[筆記] Vue3 onMounted 無法獲得 DOM 的原因和解法

在 Vue3 中整合原生的 JavaScript 套件如 Swiper，遇上了 onMounted 無法獲取 DOM 的情況。這邊筆記下成因和解決方法。

---

內容

1. Vue3 能在 onMounted 取得的 DOM 是靜態的。換言之，若你的 DOM 所在位置會是要 v-if 判斷後才出現的，那你就得在 onUpdated 才能獲得

2. 若你是在 v-if 後才會出現某個 Vue 元件，然後你在這個 Vue 元件中並沒有任何 v-if 相關的內容，就可在該 Vue 元件中的 onMounted 取得

3. 若你是用 v-show 來控制的話，由於 v-show 僅是使用 css 語法來隱藏 dom 的顯示，所以你還是可以在 onMounted 的時候獲得

---

參考資料

1. vue中onmounted周期里获取不到dom的原因

按讚加入粉絲團

延伸閱讀

• [筆記] Vite Plugin 生產正式環境下 過濾 Public 資料夾
• [筆記] Vueform Vue3 Multiselect 封裝
• [筆記] Promise.allSettled TypeScript 和批次 Batch 發送寫法
• [筆記] HTML Vue3 Click Outside 實作與誤區
• [筆記] 讓 SVG 得以自適應寬高縮訪放的方法