html重置返回初始状态,Vue 重置组件到初始状态

Vue 重置组件到初始状新直能分支调二浏页器朋代说态

Vue

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

强制重新生成 DOM 的新直能分支调二浏页器朋代说，实现

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

代码示例：

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

组件：

/**

* Demo.vue

*/

Demo

export default {

data () {

return {}

},

created: function () {

console.log('created')

}

}

主页面：

/**

* Index.vue

*/

refresh

import Demo from './Demo'

export default {

data () {

return {

id: +new Date()

}

},

methods: {

refresh: function () {

this.id = +new Date()

}

},

components: {

Demo

}

}

注：

对 +new Date() 的说明：

4 个结果一样,都是返回当前时间的毫秒数

alert(+new Date())

alert(+new Date)

var a=new Date()

alert(a.valueOf())

alert(a.getTime())

Licens遇新是直朋能到e

可以拷友，记基开前不接些前家我告对猿果水使钮控贝、转发，但是必须提供原作者信息，同时也不能将本项目用朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到随于商业用途。