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

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

個人簡介

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

主目錄

與歌謠一起通關(guān)前端面試題

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

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