對于一個(gè)vue組件，如果我們想要吧它重置到最初始的狀態(tài)，一般只需要將組件內(nèi)部的數(shù)據(jù)進(jìn)行重置即可。但是在某些情況下，這種方法并不適用。比如

• 組件在初始化時(shí)并不會(huì)觸發(fā)watch選項(xiàng)中的函數(shù)，而將數(shù)據(jù)進(jìn)行重置時(shí)則會(huì)觸發(fā)。如果我們想要將數(shù)據(jù)進(jìn)行重置卻不想執(zhí)行watch中的函數(shù)則會(huì)考慮重新生成DOM。
• 如果我們直接對DOM進(jìn)行了修改而不是通過修改數(shù)據(jù)更新DOM。
• 如果我們使用了CSS中的transition屬性實(shí)現(xiàn)過度動(dòng)畫。比如已經(jīng)完成了opacity:0到 opacity:1的過度效果。現(xiàn)在想將CSS重置為opacity:0卻不想出現(xiàn)動(dòng)畫效果。

強(qiáng)制重新生成DOM的實(shí)現(xiàn)

強(qiáng)制重新生成DOM可以通過vue中key來實(shí)現(xiàn)。在vue更新DOM時(shí)，如果key值相同則會(huì)對原有組件進(jìn)行復(fù)用，如果不同，則會(huì)重新生成。

代碼示例：

/**
 * 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>

每次點(diǎn)擊refresh按鈕，Demo組件都會(huì)重新生成