Question

请参阅此问题的示例here。

我有一个<count-down>组件，只显示一个计时器（当然每秒更新一次）。如果我同时在页面上有三个这样的计时器，它们按预期工作。但是，如果我有三个在不同时间显示在页面上（即使用v-if语句），则计时器不能按预期工作。第一个计时器工作正常，但后续计时器的生命周期钩子永远不会触发。我有一种偷偷摸摸的怀疑，即Vue试图变得聪明并重用我的第一个组件，因为它不再在页面上了。我该怎么做才能解决这种问题？

Answer 1

使用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>

Vue组件生命周期挂钩未被调用

1 个答案: