[vue] 你知道nextTick的原理嗎？

提到DOM的更新是異步執行的，只要數據發生變化，將會開啟一個隊列，并緩沖在同一事件循環中發生的所有數據變更。如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。簡單來說，就是當數據發生變化時，視圖不會立即更新，而是等到同一事件循環中所有數據變化完成之后，再統一更新視圖。關于異步的解析，可以查看阮一峰老師的這篇文章，具體來說，異步執行的運行機制如下。（1）所有同步任務都在主線程上執行，形成一個執行棧（execution context stack）。（2）主線程之外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。（3）一旦"執行棧"中的所有同步任務執行完畢，系統就會讀取"任務隊列"，看看里面有哪些事件。那些對應的異步任務，于是結束等待狀態，進入執行棧，開始執行。（4）主線程不斷重復上面的第三步。例子：//改變數據 vm.message = 'changed'//想要立即使用更新后的DOM。這樣不行，因為設置message后DOM還沒有更新 console.log(vm.$el.textContent) // 并不會得到'changed'//這樣可以，nextTick里面的代碼會在DOM更新后執行 Vue.nextTick(function(){console.log(vm.$el.textContent) //可以得到'changed' })

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的[vue] 你知道nextTick的原理吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

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