Vue.js - 等到动画完成后再更新组件答案

【问题标题】：Vue.js - wait until animation finishes before updating a componentVue.js - 等到动画完成后再更新组件
【发布时间】：2017-12-21 14:29:14
【问题描述】：

我的页面是静态 HTML+JQuery 的混合体，有些部分是用 Vue.js 编写的。

我有一个简单的 Vue 计数器组件，它从响应式存储中观察数组并显示数组的长度。

我还有一个按钮，可以将一些东西添加到商店的数组中。目前，当点击按钮时，计数器会立即刷新。

我现在想实现一个动画（可能使用 JQuery），在单击按钮时运行大约一秒钟，我希望将计数器的刷新推迟到动画完成。但是，我不能只是延迟插入到数组中，因为我还有其他 Vue 组件也在观察它，我希望它们立即更新。我还有另一个从数组中删除的按钮，我希望立即在柜台上应用减少。

您能否建议如何使用 Vue.je 来实现它？

【问题讨论】：

【解决方案1】：

创建一个计数器观察到的影子数组。 watch 源数组，并在延迟后使用setTimeout 将其复制到影子数组。

【讨论】：

我编辑了问题 - 忘了提到我还有一个减少按钮，我希望立即应用减少。但也许我可以有一个观察者检查标志并决定是立即复制还是延迟复制。然后我只能在动画触发时设置标志。是你建议的吗？
这听起来很合理。
最后一个问题，标志应该放在哪里？我想避免一个简单的全局。它可以存在于计数器中，但是按钮需要直接引用计数器，这似乎被社区所劝阻。
它应该存在于按钮和计数器的共同祖先中，并被传递给它们中的每一个（按钮会发出事件以让父级更改值）。或者你可以使用公共汽车。