vue是異步渲染的原因有哪些

這篇文章主要介紹了vue是異步渲染的原因有哪些的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue是異步渲染的原因有哪些文章都會有所收獲，下面我們一起來看看吧。

原因：可以提升性能。如果不采用異步更新，那么每次更新數(shù)據(jù)都會對當(dāng)前組件進行重新渲染；所以為了性能考慮，Vue會在本輪數(shù)據(jù)更新后，再去異步更新視圖，而不是每當(dāng)有數(shù)據(jù)更新，就立即更新視圖。

1、nextTick()的原理及作用

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

（1）應(yīng)用場景：在視圖更新之后，基于新的視圖進行操作。

• 在數(shù)據(jù)變化后執(zhí)行的某個操作，而這個操作需要使用隨數(shù)據(jù)變化而變化的DOM結(jié)構(gòu)的時候，這個操作就需要放在nextTick()的回調(diào)函數(shù)中。

• 如果在created()鉤子進行DOM操作，created()中dom還沒有渲染，一定要放在nextTick()的回調(diào)函數(shù)中。

• Vue采用了數(shù)據(jù)驅(qū)動視圖的思想，但是在一些情況下，仍然需要操作DOM。有時候，DOM1的數(shù)據(jù)發(fā)生了變化，而DOM2需要從DOM1中獲取數(shù)據(jù)，那這時就會發(fā)現(xiàn)DOM2的視圖并沒有更新，這時就需要用到了nextTick了。

（2）原理：

• nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JS 方法來模擬對應(yīng)的微/宏任務(wù)的實現(xiàn)；

• 本質(zhì)是為了利用 JS的這些異步回調(diào)任務(wù)隊列來實現(xiàn) Vue 框架中自己的異步回調(diào)隊列；

• 本質(zhì)是對JS執(zhí)行原理事件循環(huán)的一種應(yīng)用

nextTick 是典型的將底層JS執(zhí)行原理應(yīng)用到具體案例中的示例，引入異步更新隊列機制的原因∶

如果不采用異步更新，那么每次更新數(shù)據(jù)都會對當(dāng)前組件進行重新渲染。所以為了性能考慮，Vue 會在本輪數(shù)據(jù)更新后，再去異步更新視圖。而不是每當(dāng)有數(shù)據(jù)更新，就立即更新視圖。

• 為了在數(shù)據(jù)更新操作之后操作DOM，我們可以在數(shù)據(jù)變化之后立即使用nextTick(callback)；

• nextTick()將回調(diào)延遲到下一個事件循環(huán)開始時執(zhí)行, 這樣回調(diào)函數(shù)會在DOM更新完成后被調(diào)用，就可以拿到最新的DOM元素了。

當(dāng)你設(shè)置 vm.someData = 'new value'，DOM 并不會馬上更新，而是在異步隊列被清除，也就是下一個事件循環(huán)開始時執(zhí)行更新才會進行必要的DOM更新。

(3) vue的降級策略

Vue 在內(nèi)部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執(zhí)行環(huán)境不支持，則會采用 setTimeout(fn, 0) 代替，進行降級處理。降級處理的目的都是將flushCallbacks函數(shù)放入微任務(wù)或者宏任務(wù)隊列，等待下一次事件循環(huán)時來執(zhí)行

實際刷新隊列是有可能在本次事件循環(huán)的微任務(wù)中刷新的，也可能是在下一個事件循環(huán)中刷新的。這取決于代碼當(dāng)前執(zhí)行的環(huán)境，如若當(dāng)前執(zhí)行環(huán)境支持promise，那么nextTick內(nèi)部實際會用Promise去執(zhí)行，那么隊列刷新就會在本次事件循環(huán)的微任務(wù)中去執(zhí)行。

優(yōu)先選擇微任務(wù)的原因：在微任務(wù)中更新隊列是會比在宏任務(wù)中更新少一次UI渲染的。

2、為何Vue采用異步渲染

vue是組件級更新，組件內(nèi)有數(shù)據(jù)變化時，該組件就會更新。例：this.a = 1、this.b=2(同一個watcher)

（1）原因：如果不采用異步更新，那么每次更新數(shù)據(jù)都會對當(dāng)前組件進行重新渲染。所以為了性能考慮，Vue 會在本輪數(shù)據(jù)更新后，再去異步更新視圖。而不是每當(dāng)有數(shù)據(jù)更新，就立即更新視圖。

（2）過程：

• Vue是異步執(zhí)行dom更新的，一旦觀察到數(shù)據(jù)變化，Vue就會開啟一個隊列，然后把在同一個事件循環(huán) (event loop) 中 觀察到數(shù)據(jù)變化的 watcher 推送進這個隊列。

• 如果這個watcher被觸發(fā)多次，只會被推送到隊列一次。這種緩沖行為可以有效的去掉重復(fù)數(shù)據(jù)，避免不必要的計算和Dom操作。

• 而在下一個事件循環(huán)時，Vue會清空隊列，并進行必要的DOM更新。

3）源碼解析：

• 數(shù)據(jù)變化時，通過notify通知watcher進行更新操作；

• 通過subs[i].update依次調(diào)用watcher的update（未更新視圖）；

• 將watcher放到隊列中，在queueWatcher會根據(jù)watcher的id進行去重（多個屬性依賴一個watcher），如果隊列中沒有該watcher就會將該watcher添加到隊列中（未更新視圖）；

• 通過nextTick異步執(zhí)行flushSchedulerQueue方法刷新watcher隊列（更新視圖）；

關(guān)于“vue是異步渲染的原因有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“vue是異步渲染的原因有哪些”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。