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

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

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

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

Vue

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

強(qiáng)制重新生成 DOM 的實(shí)現(xiàn)

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

代碼示例：

每次點(diǎn)擊 refresh 按鈕，Demo 組件都會(huì)重新生成

組件：

/**
 * Demo.vue
 */

主頁面：

/**
 * Index.vue
 */

注：

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

License

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98228.html

相關(guān)文章

高級(jí) Vue 組件模式 (7)

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

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

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

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

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

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

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

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

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

olle 2019-08-21 18:29 評(píng)論0 收藏0