vue怎么解決this.$refs.xx在mounted中獲取DOM元素為undefined問(wèn)題

今天小編給大家分享一下vue怎么解決this.$refs.xx在mounted中獲取DOM元素為undefined問(wèn)題的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

1.原因

如果在 DOM 結(jié)構(gòu)中的某個(gè) DOM 節(jié)點(diǎn)使用了 v-if、v-show 或者 v-for（即根據(jù)獲取到的后臺(tái)數(shù)據(jù)來(lái)動(dòng)態(tài)操作 DOM，即響應(yīng)式），那么這些 DOM 是不會(huì)在 mounted 階段找到的。

mounted 階段，一般是用于發(fā)起后端請(qǐng)求，獲取數(shù)據(jù)，配合路由鉤子做一些事情。簡(jiǎn)單來(lái)說(shuō)就是在 mounted 鉤子中加載數(shù)據(jù)而已，加載回來(lái)的數(shù)據(jù)是不會(huì)在這個(gè)階段更新到 DOM 中的。

所以在 mounted 鉤子中使用 $refs，如果 ref 是定位在有 v-if、v-for、v-show 的 DOM 節(jié)點(diǎn)中，返回來(lái)的只能是 undefined，因?yàn)樵?mounted 階段他們根本不存在。

如果說(shuō) mounted 階段是加載階段，那么 updated 階段則是完成了數(shù)據(jù)更新到 DOM 的階段(對(duì)加載回來(lái)的數(shù)據(jù)進(jìn)行處理)，此時(shí)，再使用 this.$refs.xx，就 100% 能找到該 DOM 節(jié)點(diǎn)。

updated 與 mounted 不同的是，在每一次的 DOM 結(jié)構(gòu)更新，Vue.js 都會(huì)調(diào)用一次 updated 鉤子函數(shù)！而 mounted 鉤子函數(shù)僅僅只執(zhí)行一次而已。

2.解決：使用$nextTick

Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化，而是按一定的策略進(jìn)行 DOM 的更新。

$nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM。

3.動(dòng)態(tài)綁定ref并使用v-for，使用this.$refs[refName]無(wú)法獲取ref

原因

解決

將this.$refs[refName]改為this.$refs[refName][0]即可

以上就是“vue怎么解決this.$refs.xx在mounted中獲取DOM元素為undefined問(wèn)題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。