問題描述Vue中，如果wather不是同步更新的話，會放到一個隊(duì)列中，同一事件循環(huán)結(jié)束后再更新。相關(guān)代碼再scheduler的queueWatcher方法中。這里面處理一個場景：當(dāng)這個隊(duì)列正在更新時，又觸發(fā)了wather。 if (!flushing) {
queue.push(watcher)
} else {
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
}不明白為什么要這么處理。直接push到最后不行嗎？現(xiàn)在這樣的設(shè)計(jì)又有什么好處？追加描述，vue這段代碼也并不是同一個時間循環(huán)中，還沒執(zhí)行這個wather，再次觸發(fā)這個wather就只執(zhí)行一次。queue.splice(i + 1, 0, watcher)這邊是知道這個wather之前的index，并把第二次觸發(fā)放到這個后面。也還是執(zhí)行兩次update。既然都是執(zhí)行兩次，為什么不直接push到最后
1 回答
米脂
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超3個贊
自問自答一下。這個問題其實(shí)想說清楚也很簡單。之所以要以隊(duì)列緩存起來，就是為了避免不必要更新。如，
data: {
a: 1},
computed: {
b: function(){ this.a + 1
}
}
methods: {
act: function(){ this.a = 2; // do someting
this.a = 1
}
}在act操作中，我們先改變a，再把它變回來。我們理想狀況下是a沒變，b也不重新計(jì)算。其實(shí)想想就知道這是做不到的。因?yàn)橹灰猘改變了b的wather就已經(jīng)在更新隊(duì)列中了。我們能避免的，只是b的改變已經(jīng)的其他計(jì)算。
這就要求，b的wather執(zhí)行update的時候要拿到a最新的值來計(jì)算。這里就是1。
回到問題中來，如果隊(duì)列中a的watehr已經(jīng)更新過，那么就應(yīng)該把后面的a的wather放到當(dāng)前更新的wather后面，立即更新。這樣可以保證后面的wather用到a是可以拿到最新的值。
同理，如果a的wather還沒有更新，那么把新的a的wather放的之前的a的wather的下一位，也是為了保證后面的wather用到a是可以拿到最新的值
添加回答
舉報(bào)
0/150
提交
取消