?

目錄

一,前言

二,什么是異步更新隊(duì)列

三,使用異步更新隊(duì)列

四,結(jié)尾

---

一,前言

這一篇介紹有關(guān)異步更新隊(duì)列的知識(shí),通過(guò)異步更新隊(duì)列的學(xué)習(xí)和研究能夠更好的理解Vue的更新機(jī)制

• ?

---

二,什么是異步更新隊(duì)列

先看一個(gè)例子:

<div id="app"><div id="div" v-if="show">測(cè)試文本(默認(rèn)隱藏)</div><Button @click="toggle">顯示Div</Button> </div><script type="text/javascript">var vm = new Vue({el: '#app',data: {// 控制div是否渲染,默認(rèn)隱藏show: false},methods:{toggle: function () {this.show = true;var content = document.getElementById('div').innerHTML;alert("content = " + content)}}}) </script> 一個(gè)很簡(jiǎn)單的例子,由v-if控制div是否被渲染,默認(rèn)不渲染,點(diǎn)擊按鈕對(duì)div顯示/隱藏做更改

• ?

按照以往的認(rèn)識(shí):

當(dāng)點(diǎn)擊按鈕切換div顯隱時(shí),由于控制顯隱的變量show被置為true,div會(huì)被渲染 document.getElementById('div').innerHTML能夠獲取到內(nèi)部html

實(shí)際執(zhí)行結(jié)果

當(dāng)點(diǎn)擊按鈕時(shí),控制顯隱的變量show被置為true 隨后document.getElementById('div').innerHTML時(shí)會(huì)報(bào)錯(cuò) 錯(cuò)誤原因:獲取不到div元素

當(dāng)再次點(diǎn)擊按鈕時(shí),彈出alert:

?

這里就涉及到了Vue異步更新隊(duì)列的概念了:

Vue在觀察到數(shù)據(jù)發(fā)生變化時(shí),并不是直接去更新DOM, 而是會(huì)開(kāi)啟一個(gè)隊(duì)列,并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變化在緩沖時(shí),會(huì)去除重復(fù)的數(shù)據(jù),避免多余的計(jì)算和DOM操作, 在下一個(gè)事件循環(huán)tick中,刷新隊(duì)列并執(zhí)行已去重的工作

報(bào)錯(cuò)原因:

所以,在執(zhí)行this.show=true時(shí),div還未被創(chuàng)建出來(lái), 直到下一個(gè)Vue事件循環(huán)時(shí)才開(kāi)始創(chuàng)建

這種查重機(jī)制使降低了Vue的開(kāi)銷(xiāo):

for循環(huán)動(dòng)態(tài)改變數(shù)據(jù)100次,查重后,只會(huì)執(zhí)行最后一次改變, 如果沒(méi)有查重機(jī)制,頁(yè)面將重繪100此,而前99此是無(wú)用的,會(huì)加大開(kāi)銷(xiāo)

異步更新隊(duì)列實(shí)現(xiàn)的選擇:

由于瀏覽器的差異,Vue會(huì)根據(jù)當(dāng)前瀏覽器環(huán)境選擇原生Promise.then和MutationObserver 如果兩者都不支持,會(huì)采用SetTimeout進(jìn)行替代

---

三,使用異步更新隊(duì)列

了解了Vue異步更新DOM的原理之后,使用Vue提供的異步隊(duì)列對(duì)上邊的例子進(jìn)行修改剛剛分析了報(bào)錯(cuò)的原因:在show=ture是div未被創(chuàng)建,在下一個(gè)事件循環(huán)中才開(kāi)始創(chuàng)建 Vue提供了$nextTick告知DOM何時(shí)更新完成,我們可以在$nextTick中進(jìn)行div獲取 <div id="app"><div id="div" v-if="show">測(cè)試文本(默認(rèn)隱藏)</div><Button @click="toggle">顯示Div</Button> </div><script type="text/javascript">var vm = new Vue({el: '#app',data: {// 控制div是否渲染,默認(rèn)隱藏show: false},methods:{toggle: function () {this.show = true;// $nextTick:通知DOM更新完成this.$nextTick(function () {var content = document.getElementById('div').innerHTML;alert("content = " + content)})}}}) </script> 通過(guò)簡(jiǎn)單的修改后,首次點(diǎn)擊獲取內(nèi)容不再報(bào)錯(cuò)

---

四,結(jié)尾

通過(guò)對(duì)異步更新隊(duì)列的介紹,加深了對(duì)子組件渲染的了解 異步更新隊(duì)列是一個(gè)非常有用的東西,在使用第三方庫(kù)時(shí),很多并不是數(shù)據(jù)驅(qū)動(dòng)DOM的 這時(shí)就要使用JS原聲庫(kù)中創(chuàng)建,更新,銷(xiāo)毀的生命周期,通過(guò)$nextTick與Vue配合使用

本面試題為前端常考面試題，后續(xù)有機(jī)會(huì)繼續(xù)完善。我是歌謠，一個(gè)沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）?

總結(jié)

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题第三十九篇之异步更新队列-$nextTick（建议收藏）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。