Vue组件离开过渡时需持续渲染：过渡隐藏时值停止更新问题求助

哈哈，这个坑我之前踩过！其实问题出在Vue过渡配合v-if时的组件销毁机制上，我来给你拆解一下原因和解决方案：

为什么值会停止更新？ #

如果你的counter是在被过渡隐藏的组件内部，当用v-if="visible"控制显示时，组件完成离开过渡后会被Vue彻底销毁——组件内部的定时器、状态自然也就跟着停了。哪怕counter是在根实例里，当元素被v-if移除后，你看不到DOM更新，也容易误以为它停止了（但实际上根实例的counter还在跑，只是没地方展示而已）。

解决方案 #

1. 用v-show替代v-if（最省心的方案） #

v-show只是通过CSS的display: none隐藏元素，不会销毁组件或DOM节点，所以组件内部的状态、定时器都会持续运行。你只需要把模板里的v-if改成v-show就行：

<div id="demo" v-cloak>
  <transition name="fade">
    <div v-show="visible">Counter: {{ counter }}</div>
  </transition>
  <button @click="visible = !visible">Toggle</button>
</div>

这样就算元素隐藏了，counter依然会正常累加，再次显示时直接展示最新值。

2. 把状态提升到父组件（适合子组件场景） #

如果你的counter是在子组件内部管理的，那把状态和定时器逻辑移到父组件，子组件只负责接收props展示值。这样就算子组件被v-if销毁，父组件的counter依然会持续更新：

父组件代码：

var demo = new Vue({ 
  el: '#demo', 
  data: { visible: true, counter: 0 }, 
  created: function() { 
    // 用箭头函数可以省掉bind(this)，更简洁
    setInterval(() => { 
      this.counter++; 
    }, 200); 
  } 
});

子组件模板：

<transition name="fade">
  <counter-display v-if="visible" :counter="counter"></counter-display>
</transition>

子组件定义：

Vue.component('counter-display', {
  props: ['counter'],
  template: '<div>Counter: {{ counter }}</div>'
})

3. 手动管理定时器（迫不得已时用） #

如果你必须用v-if销毁组件，又想保留counter的更新逻辑，可以在组件销毁前保存当前值，下次创建时恢复，同时把定时器绑定到父实例或者全局（不推荐全局）。不过这种方式比较繁琐，优先推荐前两种方案。

验证一下 #

你可以打开控制台，在元素隐藏后输入demo.counter，就能看到它其实一直在增加——只是之前用v-if把展示它的DOM删掉了而已～

内容的提问来源于stack exchange，提问作者dodov