記一次vue中嵌套v-for 帶來的死循環問題


在做分類模塊的動態展示文章列表功能時出現了無限調用的問題

簡單描述下這個功能: 我要做一個文章分類的展示界面,分類是可以無限嵌套的,

出於頁面美觀,我的一個需求:假如一個分類下有子分類,那就在下一級中全部顯示子分類;假如一個分類下沒有子分類了,就在下一級全部顯示該分類的所有文章。

 

對樹形無限嵌套結構的動態渲染我的一般做法是:

1、父組件v-for遍歷數據源,動態生成最外層的伸縮面板,並在內部調用子組件,向子組件發送當前數據的children數組(假如有該分類有子分類的前提下)

2、子組件prop接收父組件傳來數組,v-for遍歷數組並進行渲染,假如當前分類有children數據,遞歸調用當前組件,傳children數據過去;

上面的一切都按着我的預期顯示也沒有問題,問題出在下面:

假如當前分類沒有children數據,我需要拿到當前分類下的所有文章列表,這里我去調用了另外寫的方法去通過接口返拿到數組,並遍歷這個數組

 

 

 

 這里貼一下子組件代碼:

 

 

嘗試一:在一開始時這個方法我寫的是內部定義變量 接口訪問數據后賦值給變量並返回

結果:接口請求成功並返回了數據,list變量打印出來也有值,但是頁面上死活渲染不出任何文章

 

 

 

 

 

 

 嘗試二:后來想到vue是數據驅動的,這個數據得在data里定義好變量,所以我把數據賦值給了data里定義的變量

 結果:和之前一樣,接口請求成功並返回了數據,list變量打印出來也有值,但是頁面上死活渲染不出任何文章

 

 

嘗試三:把異步等待的async和await去掉

結果:頁面上渲染出了數據,但是無限調用了這個方法,可以看到一直在發送請求

我猜測原因可能是 雙向綁定  多次調用接口導致這個綁定的變量的值不斷被改變,改變后由於數據驅動,頁面也跟着渲染,渲染時又調用了方法導致值改變....形成了一個無限調用

 

嘗試四(成功):另外再寫一個文章列表的組件,在分類子組件中傳當前分類ID去調用這個文章列表組件,文章列表拿到分類ID請求接口拿到數據並遍歷渲染 

 

 

 

 

 

 

 

總結:一開始思路錯了,不應該在分類列表的組件中想着去拿到文章列表的數據,而是應該另外定義文章列表組件。畢竟每個組件的作用是有限的。

糾結了這么久的v-for無限循環問題,也算是知道了在動態渲染的時候不能調用方法作為數據源,這樣會產生死循環導致無限調用。

解決這個業務問題  除了我另外定義的文章組件的方法外,還有個方法就是后端一開始就把每個分類的文章列表數據也加進來傳給前端,這樣前端就方便了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM