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())
補充：vue強制刷新組件
把一個組件重置到初始狀態是一個常見的需求，推薦的做法有兩種，一種是父組件重置子組件的 prop，另一種是子組件暴露一個重置的方法供父組件調用。但有些時候，子組件既沒有提供重置的方法，也沒提供 prop 來重置自己的狀態。更重要的是，這個子組件我們還動不了。于是我們就需要一種 hack 的方式來強制子組件重置到初始狀態。方法如下：
<component v-if="hackReset"></component>this.hackReset = falsethis.$nextTick(() => {this.hackReset = true})v-if 在切換時，元素及它的綁定數據和組件都會被銷毀并重建
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
