問題描述：

在mounted中打印this.$refs時可以獲取到數(shù)據(jù)

但打印this.$refs.text1時，則獲取不到數(shù)據(jù)，顯示undefined。

---

后續(xù)：通過使用this.$nextTick后有些場景可獲取到數(shù)據(jù)，但有些場景依舊獲取不到數(shù)據(jù)，還是顯示undefined。

原因分析：

mounted 階段是加載階段，有些DOM可能存在還沒有完成的情況。

---

搜索到的解釋:

當(dāng)使用$nextTick時，將在微任務(wù)(不支持微任務(wù)的瀏覽器將回退至宏任務(wù))堆棧中入棧寫的回調(diào)。如果所有子組件都已經(jīng)下載完畢，并在Vue中定義，則從根組件往后渲染時，因為用的都是同步方法，微任務(wù)將在這些同步方法后被執(zhí)行，所以大多數(shù)時候可以通過$nextTick獲取子組件渲染后的DOM節(jié)點。但是如果實例化組件的時候，有其他微任務(wù)入棧，就要看微任務(wù)隊列的執(zhí)行順序了，所以無法完全保證。對于異步組件，由于網(wǎng)絡(luò)原因，import微任務(wù)總在$nextTick之后，所以總是拿不到子組件的DOM。
個人的一些理解：
1、當(dāng)要獲取的數(shù)據(jù)是異步獲取時，mounted執(zhí)行的時候，數(shù)據(jù)還未被獲取到，$nextTick的觸發(fā)在數(shù)據(jù)異步獲取之前？
2、使用了v-if，v-for，v-show這些指令時，會根據(jù)不同的條件去動態(tài)的渲染DOM樹，此時DOM在mounted階段是不存在的；

解決方案：

通過查詢資料，因為ref本身是作為渲染結(jié)果被創(chuàng)建的，在渲染的時候是不能訪問的，因為他們還不存在。$refs不是響應(yīng)式的，只在組件渲染完成后才填充”，所以可以在DOM渲染完畢后再進行獲取。和this.$nextTick結(jié)合使用，nextTick 是在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用$nextTick，則可以在回調(diào)中獲取更新后的 DOM。

---

在this.$nextTick外面再用一個setTimeout，由于setTimeout是宏任務(wù)，所以一般會在渲染后執(zhí)行。但對于異步組件，如果由于網(wǎng)絡(luò)延遲，導(dǎo)致微任務(wù)在宏任務(wù)之后入棧，則在setTimeout的回調(diào)中仍無法獲取子組件的DOM。簡單的來說，由于有異步執(zhí)行順序的影響，只能保證單獨組件內(nèi)部的執(zhí)行順序，無法保證其他組件的解析注冊執(zhí)行順序。

---

總結(jié)：

當(dāng)遇到該問題時，可先添加this.$nextTick來解決，如果無法解決，可在this.$nextTick使用setTimeout、promise等異步來解決。

總結(jié)

以上是生活随笔為你收集整理的this.$refs获取不到dom的问题——恒生寻常问道实习记录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。