把一个组件重置到初始状态是一个常见的需求，
推荐的做法有两种，一种是父组件重置子组件的 prop，另一种是子组件暴露一个重置的方法供父组件调用。
但有些时候，子组件既没有提供重置的方法，也没提供 prop 来重置自己的状态。
更重要的是，这个子组件我们还动不了。于是我们就需要一种 hack 的方式来强制子组件重置到初始状态。方法如下：
<component v-if="hackReset"></component>
this.hackReset = false
this.$nextTick(() => {
this.hackReset = true
})
v-if 在切换时，元素及它的绑定数据和组件都会被销毁并重建
强制重新生成DOM可以通过vue中key来实现。在vue更新DOM时，如果key值相同则会对原有组件进行复用，如果不同，则会重新生成。
/**
* Demo.vue
*/
<template>
<div>Demo</div>
</template>
<script>
export default {
data () {
return {}
},
created: function () {
console.log('created')
}
}
</script>
/**
* Index.vue
*/
<template>
<div>
<Demo :key="id"></Demo>
<button @click="$refresh">refresh</button>
</div>
</template>
<script>
import Demo from './Demo'
export default {
data () {
return {
id: +new Date()
}
},
methods: {
$refresh: function () {
this.id = +new Date()
}
},
components: {
Demo
}
}
</script>
每次点击refresh按钮，Demo组件都会重新生成