中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue中使用refs定位dom出現undefined怎么辦

發布時間:2021-05-08 15:29:28 來源:億速云 閱讀:396 作者:小新 欄目:web開發

這篇文章主要介紹vue中使用refs定位dom出現undefined怎么辦,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架,Vue與其它大型框架的區別是,使用Vue可以自底向上逐層應用,其核心庫只關注視圖層,方便與第三方庫和項目整合,且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

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

于是我就對比了一下之前使用ref定位的.vue文件,發現了他們之間的區別。

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

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

 vue中使用refs定位dom出現undefined怎么辦

原來,mounted階段,DOM結構準備就緒,但是這里的準備就緒需要特別說明一下:

DOM結構已經出來了,但是如果在DOM結構中的某個DOM節點使用了v-if、v-show或者v-for(即根據獲得的后臺數據來動態操作DOM,即響應式),那么這些DOM是不會再mounted階段找到的。

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

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

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

如果想要真正地在DOM加載完成后拿到數據,就需要調用VUE的全局api : this.$nextTick(() => {})

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

updated與mounted不同的是,在每一次的DOM結構更新,vue都會調用一次updated(){}鉤子函數!而mounted僅僅只執行一次而已

簡單來說,只要在調試的時候,能看到元素的存在,在updated階段都可以使用this.$refs.xxx找到對應的DOM節點!

關于$refs的使用,官方文檔特別給出了以下提示:

vue中使用refs定位dom出現undefined怎么辦 

使用的時候就注意咯- -

以上是“vue中使用refs定位dom出現undefined怎么辦”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

衢州市| 大名县| 平陆县| 宜章县| 军事| 阳西县| 马公市| 都昌县| 石狮市| 清流县| 望江县| 乌拉特前旗| 东兰县| 北流市| 柯坪县| 胶州市| 塔河县| 聂荣县| 浮梁县| 清水县| 江西省| 灵寿县| 扶沟县| 兴隆县| 安徽省| 随州市| 松潘县| 资讯| 汾西县| 卓资县| 麻城市| 根河市| 阿鲁科尔沁旗| 安西县| 本溪| 化州市| 白玉县| 阳东县| 梅河口市| 大兴区| 渝北区|