vue獲取v-for異步數(shù)據(jù)dom

問(wèn)題描述

每次加載界面時(shí)，在 mounted階段，只能獲取普通dom（指靜態(tài)渲染的dom），獲取不到v-for的dom，盡管使用$nextTick也獲取不到，雖然使用setTimeOut能解決，但這種方法真的很low，作為程序員要追求完美，下面我們看看怎么完美解決這個(gè)問(wèn)題。

原因

在v-for里的數(shù)據(jù)是異步獲取的，里面的id或者class也都是動(dòng)態(tài)綁定的，而mounted階段只是實(shí)例掛載完成，這時(shí)候異步請(qǐng)求的數(shù)據(jù)大概率還沒(méi)請(qǐng)求完成，從而v-for要渲染的dom肯定也還沒(méi)開(kāi)始渲染，這時(shí)候連異步請(qǐng)求的數(shù)據(jù)都獲取不到，更別說(shuō)需要異步數(shù)據(jù)來(lái)渲染的dom了。

而$nextTick是指整個(gè)視圖渲染完成，注意這里不包含異步請(qǐng)求的數(shù)據(jù)，在整個(gè)視圖渲染完成時(shí)異步數(shù)據(jù)未必能請(qǐng)求到。所以調(diào)用$nextTick其實(shí)也沒(méi)什么兩樣。

解決思路及方案

第一種并不是很完美的方案：使用updated鉤子

updated 階段是完成了數(shù)據(jù)更新到 DOM 的階段(對(duì)加載回來(lái)的數(shù)據(jù)進(jìn)行處理)，此時(shí)，在使用document等獲取dom是可以得到的。

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

但是，本人不推薦這么做，因?yàn)槿绻?xiàng)目中數(shù)據(jù)更新很頻繁，虛擬dom也會(huì)跟著經(jīng)常更新，如果在updated中獲取dom，會(huì)造成操作過(guò)于頻繁的問(wèn)題，也就會(huì)多多少少影響程序性能。在vue官方也有提到。

完美解決的方案：在異步數(shù)據(jù)獲取完成時(shí)調(diào)用$nextTick獲取dom

想獲取異步請(qǐng)求數(shù)據(jù)渲染的dom就一定得等到數(shù)據(jù)接收到后再進(jìn)行相應(yīng)的操作。而有同學(xué)就問(wèn)了，為什么在獲取到數(shù)據(jù)后還要調(diào)$nextTick呢？

因?yàn)楂@取到數(shù)據(jù)之后v-for去動(dòng)態(tài)渲染dom肯定也是需要一定時(shí)間的，不可能馬上就能渲染完成，所以在獲取到異步數(shù)據(jù)之后再等整個(gè)視圖渲染完成時(shí)去獲取dom是最好的選擇。

那要在created或者mounted或者在watch中獲取就看個(gè)人選擇了。

在created或者mounted中需要在獲取完數(shù)據(jù)后在then或者await接受返回的數(shù)據(jù)再調(diào)用$nextTick獲取dom，在watch中就直接監(jiān)視請(qǐng)求的數(shù)據(jù)，數(shù)據(jù)改變就說(shuō)明獲取到了，就可以調(diào)用$nextTick獲取dom了。

vue獲取DOM問(wèn)題

利用 ref 和 $refs 可以用于獲取 dom 元素

<h1 id="h" ref="myH">我是一個(gè)孤獨(dú)可憐又能吃的h1</h1>
?
mounted() {
? ? console.log(document.getElementById("h"));
? ? console.log(this.$refs.myH);
? },

使用ref調(diào)用組件內(nèi)的方法。

<Demo ref="de"></Demo>
?
import Demo from "./child/demo";
?
//組件起別名ref
let demoObj = this.$refs.de;
//可以以此調(diào)用組件內(nèi)的方法，變量等
? ? demoObj.fn();

$nextTick使用

如果我們修改某個(gè)出現(xiàn)在DOM里的變量，之后又要獲取DOM里的變量值，那么會(huì)發(fā)現(xiàn)DOM里變量值并未修改成功，因?yàn)閂ue更新DOM是異步的，用$nextTick解決。

因?yàn)関ue 通過(guò)異步隊(duì)列控制 DOM 更新和 nextTick 回調(diào)函數(shù)先后執(zhí)行。

<p ref="myP">{{ count }}</p>
<button @click="btn">點(diǎn)擊count+1, 馬上提取p標(biāo)簽內(nèi)容</button>
?
btn() {
? ? ? this.count++; // vue監(jiān)測(cè)數(shù)據(jù)更新, 開(kāi)啟一個(gè)DOM更新隊(duì)列(異步任務(wù))
? ? ? console.log(this.count) //1
? ? ? //因?yàn)閂ue更新DOM是異步的，所以count雖然完成加一，但這里的DOM還未更新。
? ? ? console.log(this.$refs.myP.innerHTML); // 0
?
? ? ? // 解決: this.$nextTick()
? ? ? // 過(guò)程: DOM更新完會(huì)挨個(gè)觸發(fā)$nextTick里的函數(shù)體
? ? ? this.$nextTick(() => {
? ? ? ? console.log(this.$refs.myP.innerHTML); // 1
? ? ? });
?
? ? ? //方法二： async 函數(shù)執(zhí)行時(shí)， async btn(){}
? ? ? //如果遇到 await 就會(huì)先暫停執(zhí)行 ，等到觸發(fā)的異步操作完成后，
? ? ? //恢復(fù) async 函數(shù)的執(zhí)行并返回解析值
? ? ? await this.$nextTick()
? ? ? this.$refs.myP.innerHTML
? },

組件name屬性使用 

我們封裝的組件-可以自己定義name屬性組件名-讓使用者有個(gè)統(tǒng)一的前綴風(fēng)格

1.給組件（Demo）起個(gè)名字，用組件的name屬性值, 來(lái)注冊(cè)組件名字

export default {
? name: "Mmm",
}

2.之后就可以用Mmm當(dāng)作標(biāo)簽使用

import Demo from "./child/demo";
?
components: {
? ? // Demo,
? ? [Demo.name]: Demo,
? },

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論