Vue 重置組件到初始狀態(tài)

senntyou 發(fā)布于2019-08-23 12:16 / 3654人閱讀

摘要：重置組件到初始狀態(tài)通過直接強制刷新來達(dá)到重置組件的效果，這樣可以重置一些組件的動畫以及組件內(nèi)初始的數(shù)據(jù)強制重新生成的實現(xiàn)原理強制重新生成可以通過中的來實現(xiàn)。在更新時，如果值相同則會對原有組件進行復(fù)用，如果不同，則會重新生成。

Vue 重置組件到初始狀態(tài)

Vue

通過直接強制刷新 DOM 來達(dá)到重置組件的效果，這樣可以重置一些組件的動畫以及組件內(nèi)初始的數(shù)據(jù)

強制重新生成 DOM 的實現(xiàn)

原理：強制重新生成 DOM 可以通過 Vue 中的 key 來實現(xiàn)。在 Vue 更新 Dom 時，如果 key 值相同則會對原有組件進行復(fù)用，如果不同，則會重新生成。

代碼示例：

每次點擊 refresh 按鈕，Demo 組件都會重新生成

組件：

/**
 * Demo.vue
 */

主頁面：

/**
 * Index.vue
 */

注：

對 +new Date() 的說明：
4 個結(jié)果一樣,都是返回當(dāng)前時間的毫秒數(shù)
alert(+new Date())
alert(+new Date)
var a=new Date()
alert(a.valueOf())
alert(a.getTime())

License

可以拷貝、轉(zhuǎn)發(fā)，但是必須提供原作者信息，同時也不能將本項目用于商業(yè)用途。

云服務(wù)器 GPU云服務(wù)器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/98228.html

相關(guān)文章

高級 Vue 組件模式 (7)

摘要：使用目標(biāo)到目前為止，僅從組件自身的角度來看，它已經(jīng)可以滿足大多數(shù)的業(yè)務(wù)場景了。但我們會發(fā)現(xiàn)一個問題，就是當(dāng)前組件的狀態(tài)對于調(diào)用者來說，完全是黑盒狀態(tài)，即調(diào)用者無法初始化，也無法更改組件的開關(guān)狀態(tài)，這在一些場景無法滿足需求。 07 使用 State Initializers 目標(biāo) 到目前為止，僅從 toggle 組件自身的角度來看，它已經(jīng)可以滿足大多數(shù)的業(yè)務(wù)場景了。但我們會發(fā)現(xiàn)一個問題，...

Caizhenhao 2019-08-23 12:34 評論0 收藏0
動態(tài)生成form表單,不再為表單煩惱

摘要：具有數(shù)據(jù)收集校驗和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定和事件擴展，組件包含有復(fù)選框單選框輸入框下拉選擇框等表單元素以及省市區(qū)三級聯(lián)動時間選擇日期選擇顏色選擇滑塊評分框架樹型文件圖片上傳等功能組件。 form-create 具有數(shù)據(jù)收集、校驗和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定和事件擴展，組件包含有復(fù)選框、單選框、輸入框、下拉選擇框等表單元素以及省市區(qū)三級聯(lián)動,時間選擇,日期選擇,...

kamushin233 2019-08-22 14:53 評論0 收藏0
好用的Vue狀態(tài)管理模式：淺談Vuet在實際應(yīng)用中解決的問題

摘要：而的狀態(tài)測試更類似于單元測試，和組件的依賴較低，組件只會存在調(diào)用模塊的方法或者讀取狀態(tài)，在組件頻繁的改動中，而的改動相對會較小，所以狀態(tài)測試便會存在一定的價值。父子組件通信 showImg(https://segmentfault.com/img/remote/1460000010761687); Vuet提供了模塊化的狀態(tài)管理，通過對一個組件的注入，再向其子組件進行分發(fā)，使得我們可...

WilsonLiu95 2019-08-21 12:03 評論0 收藏0
vuex 閑置狀態(tài)重置方案

摘要：為了做到頁面的極致優(yōu)化，我們需要將那些閑置的狀態(tài)重置，以減小占用的內(nèi)存空間。不如當(dāng)路由改變時去重置中的所有狀態(tài)。這里只是提供一種重置狀態(tài)的一種方案，如果有更好方案還請各位看官留言。前言大型單頁應(yīng)用（后面都是指spa），我們往往會通過使用狀態(tài)管理器 vuex 去解決組件間狀態(tài)共享與狀態(tài)傳遞等問題。這種應(yīng)用少則幾十個單頁，多則上百個單頁。隨著路由的頻繁切換，每個路由對應(yīng)的 vuex 中...

junfeng777 2019-08-21 18:36 評論0 收藏0
vue vuex vue-rouert后臺項目——權(quán)限路由（超詳細(xì)簡單版）

摘要：可以配合相關(guān)的官方文檔學(xué)習(xí)。上面的內(nèi)容說的重點，其實也算是項目的全部啦項目地址感覺還不錯的話就請給個吧謝謝有什么問題歡迎提問項目地址：vue-simple-template共三個角色：adan barbara carrie 密碼全是：123456 adan 擁有最高權(quán)限A 他可以看到 red , yellow 和 blue 頁面（共三個頁面）barbara 擁有權(quán)限B 他可以看到...

olle 2019-08-21 18:29 評論0 收藏0