javascript - Vue.js组件如何销毁重新创建

Question

我有一个页面，上边是一些tab，下边是一个form页面。点击不同的tab，form页面的结构都相同，只是加载不同的数据在里面。

现在遇到的问题是，例如：

1. form中有个checkbox，应该在每个tab被点中时都为unchecked，所以应状态不依赖其他数据

2. 但是由于每个tab点中时显示的是同一个form的vue component，checkbox的值会保留上一个tab中被checked的状态

   我想做的是：

3. 每个tab还是重用同样的component

4. 但是希望在点中tab时，先销毁当前的，然后再“new”一个

   所以，Vue.js中怎么销毁再new一个呢？或者说我的case中有其他更合适的解决方案么？

2015/11/19更新：
在官网上找到了答案，用v-if就能销毁重建组件，因此内部的created ready生命周期函数会被反复调用。

v-if
用法：
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。

Answer 1

demo

上班偷着写的，代码不是很工整见谅，意思下。不知道get到你的问题没有。

---

以下是和你的问题吻合，如果不吻合请忽略。
使用Vue.js一段时间，最大的感触是观念上的转变，眼睛不要盯着DOM去操作了。要盯着数据。Vue.js 是数据驱动的，所以上来你应该想的是如何组织你的数据。

拙见 希望能帮到你。