对于一个vue组件，如果我们想要吧它重置到最初始的状态，一般只需要将组件内部的数据进行重置即可。但是在某些情况下，这种方法并不适用。比如
- 组件在初始化时并不会触发watch选项中的函数，而将数据进行重置时则会触发。如果我们想要将数据进行重置却不想执行watch中的函数则会考虑重新生成DOM。
- 如果我们直接对DOM进行了修改而不是通过修改数据更新DOM。
- 如果我们使用了CSS中的transition属性实现过度动画。比如已经完成了
opacity:0到opacity:1的过度效果。现在想将CSS重置为opacity:0却不想出现动画效果。
强制重新生成DOM的实现
强制重新生成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组件都会重新生成
