Keep-Alive中通過component多次加載同樣的動態(tài)組件無法保持狀態(tài)的解決辦法 2023年11月06日 星期一技術分享admin 問題描述項目功能上有需要動態(tài)添加組件的需求,比如tab標簽功能,動態(tài)添加標簽,同時添加后的標簽在切換時需要保存狀態(tài),自然而然想到了keep–alive,這就有了下面的代碼: 一、tabPage 定義方式1:通過components事先定義好所有會加載的組件: tagPage 通過ref或computed的方式判斷當前的標簽的類型并返回: 這個時候keep–alive是工作的,但這里的問題是:動態(tài)創(chuàng)建的組件有多個是同一個組件,比如APIAdd, 由于keep?alive的緩存機制是通過組件名稱來緩存的,同一個組件被打開多次的話其實顯示的還是第一次打開的那個,這和我們實際的應用場景不符合,不能緩存界面狀態(tài)(比如表單中輸入的內容): 二、tabPage 定義方式2:為了解決方式1中的同名組件只能加載一次的問題,需要同一個組件被加載多次,只是里面展示的內容不一樣,所以tabPage通過defineAsyncComponent異步加載: 這里組件能加載成功,同名組件每次創(chuàng)建標簽都會生成一個新的,但是這里的問題是:沒有起到keep–alive的效果,已經加載的組件,在切換時又重新創(chuàng)建了組件,?狀態(tài)自然也沒有得到保存,: 解決辦法:為了解決同一個組件可以被動態(tài)加載多次,同時需要能keep–alive,解決的辦法就是不用component,而是把所有動態(tài)添加的組件都各自放在一個keep–alive中,根據條件切換顯示即可: 這樣每個組件都可以加載自己的數據,并且可以keep?alive保存狀態(tài):