Vue杂记之强制重新生成DOM

对于一个vue组件，如果我们想要吧它重置到最初始的状态，一般只需要将组件内部的数据进行重置即可。但是在某些情况下，这种方法并不适用。比如

• 组件在初始化时并不会触发watch选项中的函数，而将数据进行重置时则会触发。如果我们想要将数据进行重置却不想执行watch中的函数则会考虑重新生成DOM。
• 如果我们直接对DOM进行了修改而不是通过修改数据更新DOM。
• 如果我们使用了CSS中的transition属性实现过度动画。比如已经完成了opacity:0到 opacity:1的过度效果。现在想将CSS重置为opacity:0却不想出现动画效果。

强制重新生成DOM的实现

强制重新生成DOM可以通过vue中key来实现。在vue更新DOM时，如果key值相同则会对原有组件进行复用，如果不同，则会重新生成。

代码示例：

/**
 * Demo.vue
 */

/**
 * Index.vue
 */

每次点击refresh按钮，Demo组件都会重新生成