Example of a method to reset a component to an initial state of Vue

Vue

The effect of resetting the component is achieved by force refreshing the DOM directly, so that some component animations can be reset and the initial data within the component can be reset.

Forced regenerate DOM implementation

Principle: Forced regeneration of DOM can be achieved through keys in Vue. When Vue updates Dom, if the key value is the same, the original components will be reused, and if it is different, it will be regenerated.

Code example:

Each time you click the refresh button, the Demo component will be regenerated

Components:

/**
 * 
 */
<template>
 <div>Demo</div>
</template>
<script>
 export default {
  data () {
   return {}
  },
  created: function () {
   ('created')
  }
 }
</script>

Main page:

/**
 * 
 */
<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 () {
     = +new Date()
   }
  },
  components: {
   Demo
  }
 }
</script>

Note:

Description of +new Date():
The 4 results are the same, all return the milliseconds of the current time
alert(+new Date())
alert(+new Date)
var a=new Date()
alert(())
alert(())

Supplement: vue force refresh component

Resetting a component to the initial state is a common requirement. There are two recommended methods: one is to reset the prop of the child component, and the other is to expose a reset method for the parent component to call. But sometimes, subcomponents do not provide a reset method or provide a prop to reset their state. More importantly, we can't move this subcomponent. So we need a hack method to force the child component to reset to the initial state. The method is as follows:

<component v-if="hackReset"></component>

 = false
this.$nextTick(() => {
 = true
})

v-if When switching, the element, its bound data and components will be destroyed and rebuilt

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.