在使用element-plus的loading加載組件時,發現了這么一個方法
引發思考:
第一行代碼很好懂,創建一個ElLoading的實例,其中options時啟動loading的配置項
第三行代碼很好懂,關閉這個loading實例,
那么第二行這個nextTick是干什么用的呢
我們不妨反向思考一下,如果沒有這個方法,直接寫loadingInstance.close會發生什么.
結果顯而易見,我只看到了屏幕閃了一下,那么動畫呢?
這時候答案就顯而易見了,如果沒有nextTick包裹close()方法,創建loading實例並調用后頁面根本就來不及播放完loading的加載動畫,就會直接執行close()從而關閉動畫!
我們來看看vue3官方文檔是如何解釋它的
回調是什么?
還請您先閱讀這篇博客:https://www.cnblogs.com/moxiaowohuwei/p/8438236.html
我們知道,vue實現響應式並不是數據一發生改變dom就立即更新的,而是按照一定的策略來更新dom,當一個方法中有多個回調函數執行時,vue不會等待其中的一個方法執行后立即更新dom,再去進行下一個方法的執行,而是會立即執行方法中所有的回調函數后才會更新dom,這也許是因為js是單線程的原因吧,所以我們就需要用到nextTick來保證這個方法中的某個回調函數可以在dom更新后再執行
它的原理其實就是:
原因是，vue是異步執行dom更新的，一旦觀察到數據變化，Vue就會開啟一個隊列，然后把在同一個事件循環 (event loop) 當中觀察到數據變化的 watcher 推送進這個隊列。如果這個watcher被觸發多次，只會被推送到隊列一次。這種緩沖行為可以有效的去掉重復數據造成的不必要的計算和dom操作。而在下一個事件循環時，vue會清空隊列，並進行必要的dom更新。
當你設置 vm.someData = 'new value'，dom並不會馬上更新，而是在異步隊列被清除，也就是下一個事件循環開始時執行更新時才會進行必要的dom更新。如果此時你想要根據更新的 dom狀態去做某些事情，就會出現問題。。為了在數據變化之后等待 vue完成更新 dom，可以在數據變化之后立即使用 vue.nextTick(callback) 。這樣回調函數在 dom更新完成后就會調用。