與歌謠一起通關前端面試題提到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())
vue的nextTick的實現
vue的nexttick是用瀏覽器支援的方法模擬nodejs的process.nexttick 老版本的vue用如下方法來模擬 promise.then mutationobserver mutationobserver由於相容性原因被下課 settimeout fn,0 新版本的vue用如下方法來...
Vue裡的nextTick方法
官方解釋 在下次 dom 更新迴圈結束之後執行延遲 在修改資料之後立即使用這個方法,獲取更新後的 dom。自己總結 vue.nexttick callback 當資料發生變化,更新後執行 vue.nexttick callback 當dom發生變化,更新後執行的 例項 message got out...
聊聊VUE中的nextTick
在談nexttick之前,先要說明一件事,可能在我們平時使用vue時並沒有關注到,事實上,vue執行的dom更新是非同步的。舉個栗子 此時控制台列印的是數值是0 這時候如果你將 改一下 這時,控制台列印的數值為1000 這也就說明,vue的dom更新是非同步的,官網上是這樣描述的 可能你還沒有注意到...