查看此问题的示例here。
我有一个<count-down> 组件，它只显示一个计时器（当然，它每秒更新一次）。如果我在页面上同时有三个这样的计时器，它们会按预期工作。但是，如果我有三个在不同时间显示在页面上（即使用 v-if 语句），则计时器不会按预期工作。第一个计时器工作得很好，但后续计时器的生命周期钩子永远不会触发。我偷偷怀疑 Vue 试图变得聪明并重用我的第一个组件，因为它不再出现在页面上。我可以做些什么来解决此问题？
【问题讨论】：
标签： vuejs2 vue-component
使用key。
key 特殊属性主要用作 Vue 的虚拟 DOM 算法在将新节点列表与旧列表进行比较时识别 VNode 的提示。在没有键的情况下，Vue 使用一种算法来最大限度地减少元素移动，并尝试尽可能多地就地修补/重用相同类型的元素。
来自您的代码笔：
<count-down :description="'Timer 1: '" :seconds="3" v-if="sync" :key="1"></count-down>
<count-down :description="'Timer 2: '" :seconds="5" v-if="sync" :key="2"></count-down>
<count-down :description="'Timer 3: '" :seconds="7" v-if="sync" :key="3"></count-down>
<count-down :description="'Timer 4: '" :seconds="3" v-if="async === 4" :key="4"></count-down>
<count-down :description="'Timer 5: '" :seconds="5" v-if="async === 5" :key="5"></count-down>
<count-down :description="'Timer 3: '" :seconds="7" v-if="async === 6" :key="6"></count-down>
【讨论】：