這篇文章主要介紹vue中使用refs定位dom出現(xiàn)undefined怎么辦，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

10年積累的成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計制作后付款的網(wǎng)站建設(shè)流程，更有新河免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

之前在公司做項目，一直感覺用ref來定位dom節(jié)點挺方便的。但是期間遇到了一個問題，就是在mounted(){}鉤子里面使用this.$refs.xxx，打印出來的卻是undefined？

于是我就對比了一下之前使用ref定位的.vue文件，發(fā)現(xiàn)了他們之間的區(qū)別。

我們要想知道為什么會定位不到某個DOM節(jié)點，我們首先要理解mounted(){}這個鉤子函數(shù)是用來做什么的。

下面是vue官方給出的vue生命周期（部分），正如官方所說的一樣，一開始不必先理解，不過隨這你的學(xué)習(xí)與使用，他的參考價值會越來越高。

 

原來，mounted階段，DOM結(jié)構(gòu)準(zhǔn)備就緒，但是這里的準(zhǔn)備就緒需要特別說明一下：

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

此時的mounted階段，一般是用于發(fā)起后端請求，拿回數(shù)據(jù)，配合路由鉤子做一些事情，簡單來說就是在mounted鉤子中加載數(shù)據(jù)而已，加載回來的數(shù)據(jù)是不會再這個階段更新的DOM中的

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

經(jīng)過檢驗，上面端文字是錯誤的，$refs定位不到的主要原因是因為v-if、v-for、v-show這些語句如果依賴父組件傳來的參數(shù)的話，該該參數(shù)是在mounted()階段子還沒獲取得到~~~~?。。?！

如果想要真正地在DOM加載完成后拿到數(shù)據(jù)，就需要調(diào)用VUE的全局api ： this.$nextTick(() => {})

如果說mounted階段是加載階段，那么updated階段則是完成了數(shù)據(jù)更新到DOM的階段(對加載回來的數(shù)據(jù)進行處理)，此時，ref、數(shù)據(jù)等等全部都掛載到DOM結(jié)構(gòu)上去，在update階段使用this.$refs.xxx，就100%能找到該DOM節(jié)點。

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

簡單來說，只要在調(diào)試的時候，能看到元素的存在，在updated階段都可以使用this.$refs.xxx找到對應(yīng)的DOM節(jié)點！

關(guān)于$refs的使用，官方文檔特別給出了以下提示：

 

使用的時候就注意咯- -

以上是“vue中使用refs定位dom出現(xiàn)undefined怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文名稱：vue中使用refs定位dom出現(xiàn)undefined怎么辦-創(chuàng)新互聯(lián)
分享URL：http://www.rwnh.cn/article46/dgsceg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、響應(yīng)式網(wǎng)站、云服務(wù)器、定制開發(fā)、品牌網(wǎng)站制作、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)