vue中使用refs定位dom出現(xiàn)undefined怎么辦

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

創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷(xiāo)，提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)站開(kāi)發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營(yíng)銷(xiāo)、小程序制作、公眾號(hào)商城、等建站開(kāi)發(fā)，創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)策劃專(zhuān)家，為不同類(lèi)型的客戶(hù)提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶(hù)在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢(shì)。

vue是什么

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

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

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

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

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

 

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

DOM結(jié)構(gòu)已經(jīng)出來(lái)了，但是如果在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階段找到的。

此時(shí)的mounted階段，一般是用于發(fā)起后端請(qǐng)求，拿回?cái)?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)樵趍ounted階段他們根本不存在?。?/p>

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

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

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

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

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

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

 

使用的時(shí)候就注意咯- -

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

標(biāo)題名稱(chēng)：vue中使用refs定位dom出現(xiàn)undefined怎么辦
網(wǎng)頁(yè)網(wǎng)址：http://bm7419.com/article6/jdgpog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、做網(wǎng)站、電子商務(wù)、網(wǎng)站策劃、云服務(wù)器、品牌網(wǎng)站制作

廣告

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