前兩天在開發(fā)時(shí)遇到一個(gè)需求：打開對(duì)話框的時(shí)候自動(dòng)聚焦其中的輸入框。由于原生的 autofocus 屬性不起作用，需要使用組件庫提供的 focus 方法手動(dòng)手動(dòng)獲取焦點(diǎn)。于是有如下代碼：

<el-button @click="openDialog">點(diǎn)擊打開 Dialog</el-button>

<el-dialog :visible.sync="dialogVisible">
? <el-input v-model="input" ref="input"></el-input>
</el-dialog>

methods: {
? openDialog() {
? ? this.dialogVisible = true;
? ? const input = this.$refs.input;
? ? input.focus();
? },
},

結(jié)果報(bào)錯(cuò)了，原因是沒有獲取到 input 組件；通過 log，也驗(yàn)證了 this.$refs.input 的值確實(shí)是 undefined。但是經(jīng)過測(cè)試，如果對(duì)話框默認(rèn)狀態(tài)是打開的，就不會(huì)報(bào)錯(cuò)；明明組件就在那，為什么獲取不到呢？

生命周期 update

經(jīng)過分析，這種現(xiàn)象是由于 Vue 實(shí)例的更新機(jī)制造成的。從下方的生命周期圖（局部）中可以看出，組件裝載好之后，遇到數(shù)據(jù)變化時(shí)將重新渲染虛擬 DOM（可以理解為 HTML 中的組件節(jié)點(diǎn)）。在本例中，隱藏的 Dialog 組件（以及其中的 input 組件）本來并沒有渲染在 DOM 中，是在觀察到 dialogVisible 屬性變?yōu)?true 后再進(jìn)行更新渲染的。

而網(wǎng)頁渲染通常是一個(gè)異步任務(wù)，因此在 visible 屬性剛剛更改時(shí)（一個(gè)函數(shù)中是同步過程），DOM 渲染還沒有進(jìn)行，因此自然獲取不到此時(shí)還不存在的 input 組件了。

關(guān)于異步、JS任務(wù)隊(duì)列、宏任務(wù)與微任務(wù)等概念的更多介紹，可參考博文JS多線程：任務(wù)隊(duì)列

為了更直觀地展示這個(gè)過程，可以在更新前后的鉤子函數(shù)中試圖獲取組件并進(jìn)行打?。?/p>

beforeUpdate() {
? console.log("beforeUpdate");
? const input = this.$refs.input;
? console.log(input);
},
updated() {
? console.log("updated");
? const input = this.$refs.input;
? console.log(input);
},
methods: {
? openDialog() {
? ? this.dialogVisible = true;
? ? console.log("click open");
? },
},

結(jié)果如下，可以驗(yàn)證之前的分析和猜想：

click open
beforeUpdate
undefined
updated
VueComponent {...}

Vue.nextTick

為了解決這個(gè)問題，Vue 提供了全局 api Vue.nextTick()，它的作用是提供下次 DOM 更新之后的回調(diào)。也就是說，在更新數(shù)據(jù)后調(diào)用 api，就能夠獲取到重新渲染后的 DOM 并進(jìn)行相關(guān)操作。

nextTick 方法可以廣泛適用于各種需要在數(shù)據(jù)更新后對(duì)相關(guān) DOM 進(jìn)行操作的情景，例如 v-if 、watch 等。

在上文的例子中再加入 nextTick：

openDialog() {
? this.dialogVisible = true;
? console.log("click open");
? this.$nextTick(function () {
? ? console.log("next tick");
? ? const input = this.$refs.input;
? ? console.log(input);
? ? input.focus();
? });
},

可以看到，回調(diào)確實(shí)是在 DOM 更新之后，也就是 updated 執(zhí)行之后才執(zhí)行的。獲取組件與手動(dòng)獲得焦點(diǎn)的操作也能夠正確執(zhí)行了。

click open
beforeUpdate
undefined
updated
VueComponent {...}
next tick
VueComponent {...}

Promise

如果沒有提供回調(diào)參數(shù)，并且瀏覽器支持 Promise，調(diào)用 nextTick 將返回一個(gè) Promise。也就是說下面幾種寫法是等價(jià)的（環(huán)境支持的情況下）：

Vue.nextTick(function () {...})
Vue.nextTick(() => {...})

Vue.nextTick().then(function () {...})
Vue.nextTick().then(() => {...})

關(guān)于 Promise 的介紹和用法，可以參考博文 JS Promise。

結(jié)語&參考資料

以上是個(gè)人對(duì) Vue 中 nextTick api 的一些理解與思考，希望能給你提供幫助。如果有問題或疏漏之處，歡迎在評(píng)論中討論與指正。

參考資料：

Vue 文檔 - api

Vue 文檔 - 實(shí)例

到此這篇關(guān)于Vue nextTick獲取更新后的DOM的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue nextTick獲取更新后的DOM內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論