[Vue] A Big DOM change

驚人的發現

勾選6000筆後，需要40秒的時間才能勾選全部的表格，一般來說不會遇到這種狀況，所以這是很難得可以觀察的機會。

以上為全部勾選動作觸發的方法，下面是呈現的結果畫面。

我們為this.$nextTick 寫個callback，發現觸發this.$nextTick 觸發後還是沒有勾選，到了doubleRaf callback 之後才全部勾選。下面的討論串與我遇到的狀況很像，作者提問this.$nextTick到底有什麼用?

How to wait for a browser re-render? Vue.nextTick doesn't seem to cover it, and setTimeout(..., 0)…

作者提到的觀點：

Vue.nextTick at https://vuejs.org/v2/api/#Vue-nextTick is inaccurate: “Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.” This seems wrong; this is a good case where the user doesn’t see the DOM update at all even though Vue.nextTick was used.

其中有個網友回覆：

I’m not even sure it’s wrong, the update happens, the browser still hasn’t rendered the content.

意思是說確實已經更新，但是瀏覽器還沒來得及更新內文

什麼是nextTick?

[Day 19] Vue nextTick 處理完成後就換我! - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

answershuto/learnVue

簡單來說，在Vue裡面是資料先更新，資料更新完後才會做DOM的更新。

討論串中這位網友的方法解決了我的問題

他這邊用了兩次 requestAnimationFrame 來等待瀏覽器的更新，而許多網友對這則有用的訊息表示贊同的回覆：

Sometimes when i’m updating large parts of the DOM, Vue.nextTick is not enough. In this cases, Justineo’s solution with “double” requestAnimationFrame works most of the time.

Right now, I consider this “doubleRaf” a Vue.nextTick with asteroids. Thanks @Justineo

甚至有人將它包成一個套件：

vue-force-next-tick