Vue 重置组件到初始状态

Vue

---

通过直接强制刷新 DOM 来达到重置组件的效果，这样可以重置一些组件的动画以及组件内初始的数据

强制重新生成 DOM 的实现

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

代码示例：

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

组件：

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

注：

对 +new Date() 的说明：
4 个结果一样,都是返回当前时间的毫秒数
alert(+new Date())
alert(+new Date)
var a=new Date()
alert(a.valueOf())
alert(a.getTime())

License

• 可以拷贝、转发，但是必须提供原作者信息，同时也不能将本项目用于商业用途。