天天看點

vue的$nextTick的原理

參考:https://cloud.tencent.com/developer/article/1633546

總結一下:就是$nextTick将回調函數放到微任務或者宏任務當中以延遲它地執行順序;(總結的也比較懶👶)

重要的是了解源碼中它的三個參數的意思:

  • callback:我們要執行的操作,可以放在這個函數當中,我們沒執行一次$nextTick就會把回調函數放到一個異步隊列當中;
  • pending:辨別,用以判斷在某個事件循環中是否為第一次加入,第一次加入的時候才觸發異步執行的隊列挂載
  • timerFunc:用來觸發執行回調函數,也就是Promise.then或MutationObserver或setImmediate 或setTimeout的過程(Vue 在内部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate,如果執行環境不支援,則會采用 setTimeout(fn, 0) 代替。)

了解之後,在看整個 n e x t T i c k 裡面的執行過程,其實就是把一個個 nextTick裡面的執行過程,其實就是把一個個 nextTick裡面的執行過程,其實就是把一個個nextTick中的回調函數壓入到callback隊列當中,然後根據事件的性質等待執行,輪到它執行的時候,就執行一下,然後去掉callback隊列中相應的事件。

繼續閱讀