Vue.js-等待動畫完成后再更新組件

Question

我的頁面是靜態HTML + JQuery的混合，其中一些部分是用Vue.js編寫的。

我有一個簡單的Vue計數器組件，該組件從反應式存儲中觀察數組並顯示數組的長度。

我也有一個按鈕，可以為商店的陣列添加一些東西。 當前，單擊按鈕時，計數器立即刷新。

現在，我想實現一個動畫（可能使用JQuery），該動畫在單擊按鈕時運行大約一秒鍾，並且希望將刷新計數器的時間推遲到動畫結束之前。 但是，我不能只是延遲插入數組，因為我還有其他Vue組件也可以觀察到它，並且希望它們立即更新。 我還有另一個從數組中刪除的按鈕，我希望減少值可以立即應用於計數器。

您能否建議如何使用Vue.je實施它？

Answer 1

創建一個計數器觀察到的陰影數組。 watch源數組，並在延遲后使用setTimeout將其復制到陰影數組。