vue中onmounted周期里獲取不到dom的原因及分析
更新時(shí)間：2024年03月06日 08:43:06 作者：zn_firm
這篇文章主要介紹了vue中onmounted周期里獲取不到dom的原因及分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue onmounted周期里獲取不到dom的原因
在onmounted里可以獲取到任意一個(gè)靜態(tài)的dom，注意，這里說的是靜態(tài)dom，對(duì)于動(dòng)態(tài)dom，他是獲取不到的
動(dòng)態(tài)dom有2種情況
1）帶有v-if指令，獲取不到值為false的那個(gè)dom
2）帶有v-for指令，當(dāng)初始化時(shí)，要循環(huán)的數(shù)組沒有值，這個(gè)時(shí)候是獲取不到相關(guān)dom的
重點(diǎn)：
有v-show指令時(shí),即使值為false，依舊能獲取到相應(yīng)的dom，切記他和v-if不一樣
解決方法
1）在nexttick中獲取dom
2）在onUpdated中獲取dom
vue3獲取dom遇到的坑
項(xiàng)目前端引入manco.editor 的時(shí)候，如果要獲取代碼編輯器內(nèi)的內(nèi)容的話，需要使用toRaw獲取源dom才可以獲取到值。
比如getValue()，如果直接用editor.value去獲取就會(huì)有問題。
以及v-if中的值在改變的時(shí)候會(huì)重新刷新組件以及重置dom。
v-show不會(huì)重置dom。所以選擇使用。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中emit('update:modelValue')使用簡(jiǎn)單示例
這篇文章主要給大家介紹了關(guān)于vue3中emit('update:modelValue')使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
本篇文章給大家分享了Vue實(shí)例的相關(guān)內(nèi)容以及重要知識(shí)點(diǎn)，對(duì)此有興趣的朋友可以跟著學(xué)習(xí)參考下。2018-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購(gòu)物車選擇功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)信息管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了vue-cli@3.0 使用及配置說明,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
Vue事件獲取事件對(duì)象之event.currentTarget詳解
這篇文章主要介紹了Vue事件獲取事件對(duì)象之event.currentTarget,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue?cli3.0創(chuàng)建Vue項(xiàng)目的簡(jiǎn)單過程記錄
Vue CLI是一個(gè)基于Vue.js進(jìn)行快速開發(fā)的完整系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue?cli3.0創(chuàng)建Vue項(xiàng)目的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
Vue3+Vite實(shí)現(xiàn)一個(gè)Markdown編輯器組件
在現(xiàn)代前端開發(fā)中,Markdown 編輯器廣泛應(yīng)用于博客,文檔,Wiki,代碼注釋等場(chǎng)景,本文將使用 Vue 3 構(gòu)建一個(gè)簡(jiǎn)單的 Markdown 編輯器組件,感興趣的小伙伴可以了解下2025-04-04
今天我們稍微說一下 vue3 項(xiàng)目中的 hooks 的使用，其實(shí)這個(gè) hooks 呢是和 vue2 當(dāng)中的 mixin 是類似的，學(xué)習(xí)過 vue2 的小伙伴一定對(duì) mixin 一定比較熟悉，快跟隨小編一起來學(xué)習(xí)學(xué)習(xí)吧2022-08-08
本篇文章主要介紹了基于 Vue 的樹形選擇組件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08