鍍金池/ 問答/HTML/ vue可復(fù)用組件的數(shù)據(jù)緩存問題

vue可復(fù)用組件的數(shù)據(jù)緩存問題

圖片描述
現(xiàn)有a和b兩個組件，其中b組件下有c組件，d組件為a組件和c組件的共同組件，他的作用是解析從服務(wù)器抓取的數(shù)據(jù)，這些數(shù)據(jù)臨時存儲在vuex的state的一個數(shù)組中。
現(xiàn)在我遇到的問題是：a組件下用到復(fù)用組件c渲染出頁面后，然后當(dāng)切換到b組件下的c組件，這個c組件使用復(fù)用組件渲染頁面時，會先出現(xiàn)在d在a組件下的頁面，然后才被新的頁面取代，請問有什么方法可以解決啊，謝謝大家...

回答
編輯回答
淚染裳
  1. 最簡單的是不緩存這個組件，比如樓上提到的v-if，如果你是使用的keep-alive，用exclude
  2. 你應(yīng)該是想在兩次使用d組件的時候使用不同的數(shù)據(jù)，你可以在獲取數(shù)據(jù)的時候用一個loading覆蓋住這個組件，在activated鉤子里顯示loading，獲取數(shù)據(jù)后隱藏loading
2017年12月18日 19:19
編輯回答
艷骨

我感覺是vuex的問題，如果你的d組件是用的vuex的數(shù)據(jù)，每次進(jìn)來的時候當(dāng)然會先顯示上次的數(shù)據(jù)，因?yàn)檫@時候你的vuex的數(shù)據(jù)可能還沒有改變，當(dāng)數(shù)據(jù)改變的時候你的顯示當(dāng)然會改變了

2018年5月10日 15:28
編輯回答
不討喜

用v-if控制組件的生命周期，每次都執(zhí)行新的生命周期不就好了

2017年11月29日 20:08
編輯回答
心悲涼

補(bǔ)充一下：v-if是每次都會將所有的if或者是else進(jìn)行渲染，然后核心是利用了display：block以及none進(jìn)行相應(yīng)的dom進(jìn)行渲染，所以，一般頁面復(fù)雜或者是層級較深，不建議這樣使用，更好的方式使用通過不同的路由進(jìn)行請求，渲染指定的組件，但是這樣可能就會出現(xiàn)，公共組件重復(fù)渲染的情況，所有使用keep-alive可以達(dá)到進(jìn)行組件的緩存效果，當(dāng)再次渲染指定的組件的時候，只需要從緩存中進(jìn)行獲取就可以，但是值得注意的是keep-alive中是不支持使用v-for循環(huán)的，有且只能渲染首個

2017年6月9日 15:36