在 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 的時候獲得