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
 */
<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组件都会重新生成