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

問題描述

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

原因

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

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

解決思路及方案

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

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

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

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

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

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

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

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

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

vue獲取DOM問題

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

<h1 id="h" ref="myH">我是一個孤獨可憐又能吃的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使用

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

因為vue 通過異步隊列控制 DOM 更新和 nextTick 回調(diào)函數(shù)先后執(zhí)行。

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

組件name屬性使用 

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

1.給組件（Demo）起個名字，用組件的name屬性值, 來注冊組件名字

export default {
? name: "Mmm",
}

2.之后就可以用Mmm當作標簽使用

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

總結(jié)

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

最新評論