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

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

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

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

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

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

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

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

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

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

如果說mounted階段是加載階段，那么updated階段則是完成了數(shù)據(jù)更新到DOM的階段(對加載回來的數(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都會調(diào)用一次updated(){}鉤子函數(shù)！而mounted僅僅只執(zhí)行一次而已

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論