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

章節連結

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

vue.js logo vue


內容

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的原因

按讚加入粉絲團

延伸閱讀