?

目錄

一,前言

二,什么是異步更新隊列

三,使用異步更新隊列

四,結尾

---

一,前言

這一篇介紹有關異步更新隊列的知識,通過異步更新隊列的學習和研究能夠更好的理解Vue的更新機制

• ?

---

二,什么是異步更新隊列

先看一個例子:

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

• ?

按照以往的認識:

當點擊按鈕切換div顯隱時,由于控制顯隱的變量show被置為true,div會被渲染 document.getElementById('div').innerHTML能夠獲取到內部html

實際執行結果

當點擊按鈕時,控制顯隱的變量show被置為true 隨后document.getElementById('div').innerHTML時會報錯 錯誤原因:獲取不到div元素

當再次點擊按鈕時,彈出alert:

?

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

Vue在觀察到數據發生變化時,并不是直接去更新DOM, 而是會開啟一個隊列,并緩沖在同一事件循環中發生的所有數據變化在緩沖時,會去除重復的數據,避免多余的計算和DOM操作, 在下一個事件循環tick中,刷新隊列并執行已去重的工作

報錯原因:

所以,在執行this.show=true時,div還未被創建出來, 直到下一個Vue事件循環時才開始創建

這種查重機制使降低了Vue的開銷:

for循環動態改變數據100次,查重后,只會執行最后一次改變, 如果沒有查重機制,頁面將重繪100此,而前99此是無用的,會加大開銷

異步更新隊列實現的選擇:

由于瀏覽器的差異,Vue會根據當前瀏覽器環境選擇原生Promise.then和MutationObserver 如果兩者都不支持,會采用SetTimeout進行替代

---

三,使用異步更新隊列

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

---

四,結尾

通過對異步更新隊列的介紹,加深了對子組件渲染的了解 異步更新隊列是一個非常有用的東西,在使用第三方庫時,很多并不是數據驅動DOM的 這時就要使用JS原聲庫中創建,更新,銷毀的生命周期,通過$nextTick與Vue配合使用

本面試題為前端?？济嬖囶}，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。