vue為什麼是非同步渲染

原因：可以提升效能。如果不採用非同步更新，那麼每次更新資料都會對目前元件進行重新渲染；所以為了效能考慮，Vue會在本輪資料更新後，再去異步更新視圖，而不是每當有資料更新，就立即更新視圖。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

1、nextTick()的原理及作用

#nextTick確保我們所操作的DOM是更新之後的。

（1）套用場景：在視圖更新之後，基於新的視圖進行操作。

• 在資料變化後執行的某個操作，而這個操作需要使用隨資料變化而變化的DOM結構的時候，這個操作就需要放在nextTick()的回呼函數中。
• 如果在created()鉤子進行DOM操作，created()中dom還沒有渲染，#一定要放在nextTick()的回調函數中。
• Vue採用了資料驅動視圖的思想，但是在某些情況下，仍然需要操作DOM。有時候，DOM1的數據發生了變化，而DOM2需要從DOM1取得數據，那這時就會發現DOM2的視圖並沒有更新，這時就需要用到了nextTick了。

（2）原理：

• #nextTick 的核心是利用了如Promise 、MutationObserver、setImmediate、setTimeout的原生JS 方法來模擬對應的微/宏任務的實作；
• 本質是為了利用JS的這些非同步回呼任務佇列來實作Vue 框架中自己的非同步回呼佇列；
• 本質是對JS執行原理事件循環的一種應用

nextTick 是典型的將底層JS執行原理應用到具體案例中的範例，引入非同步更新佇列機制的原因∶

#如果不採用非同步更新，那麼每次更新資料都會對目前元件進行重新渲染。 所以為了效能考慮，Vue 會在本輪資料更新後，再去異步更新視圖。 而不是每當有資料更新，就立即更新視圖。

• 為了在資料更新作業之後操作DOM，我們可以在資料變更之後立即使用nextTick(callback);
• nextTick()將回呼延遲到下一個事件循環開始時執行, 這樣回呼函數會在DOM更新完成後被調用，就可以拿到最新的DOM元素了。

當你設定vm.someData = 'new value'，DOM 不會馬上更新，而是在非同步佇列被清除，也就是下一個事件循環開始時執行更新才會進行必要的DOM更新。

(3) vue的降級策略

Vue 在內部對非同步佇列嘗試使用原生的Promise.then、MutationObserver 和setImmediate，如果執行環境不支持，則會採用setTimeout(fn, 0) 代替，進行降級處理。降級處理的目的都是將flushCallbacks函數放入微任務或巨集任務佇列，等待下一次事件循環時來執行

實際刷新佇列是有可能在本次事件循環的微任務中刷新的，也可能是在下一個事件循環中刷新的。這取決於程式碼目前執行的環境，如若目前執行環境支援promise，那麼nextTick內部實際上會用Promise去執行，那麼佇列刷新就會在本次事件循環的微任務中去執行。

優先選擇微任務的原因：在微任務中更新佇列是會比在巨集任務中更新少一次UI渲染的。

2、為何Vue採用非同步渲染

vue是元件級更新，元件內有資料變化時，該元件就會更新。例：this.a = 1、this.b=2(同一個watcher)

（1）原因：如果不採用非同步更新，那麼每次更新資料都會對目前元件進行重新渲染。 所以為了效能考慮，Vue 會在本輪資料更新後，再去異步更新視圖。 而不是每當有資料更新，就立即更新視圖。

（2）過程：

• #Vue是非同步執行dom更新的，一旦觀察到資料變化，Vue就會開啟一個佇列，然後把在同一個事件循環(event loop) 中觀察到資料變化的watcher 推送到這個佇列。

• 如果這個watcher被觸發多次，只會被推送到佇列一次。這種緩衝行為可以有效的去掉重複數據，避免不必要的計算和Dom操作。

• 而在下一個事件循環時，Vue會清空佇列，並進行必要的DOM更新。

3）原始碼解析：

• 資料變更時，透過notify通知watcher進行更新操作；

• 透過subs[i].update依序呼叫watcher的update（未更新視圖）；

• 將watcher放到佇列中，在queueWatcher會根據watcher的id去重（多個屬性依賴一個watcher），如果佇列中沒有該watcher就會將該watcher新增至佇列（未更新視圖）；

• 透過nextTick非同步執行flushSchedulerQueue方法刷新watcher佇列（更新視圖）；

# 

【相關推薦：vuejs影片教學、web前端開發】

以上是vue為什麼是非同步渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！