在用vue實(shí)現(xiàn)一個(gè)無限層級的樹型結(jié)構(gòu)時(shí)，遇到了這個(gè)問題。

頁面結(jié)構(gòu)如圖：

其中，父頁面的處理邏輯：

步驟一：引用并掛載組件，同時(shí)向組件props傳遞樹型JSON列表數(shù)據(jù)(this.list)，當(dāng)然這時(shí)候的 this.list 還只是一個(gè)空數(shù)組。

步驟二：在 onload 事件中從服務(wù)器獲取樹型JSON數(shù)據(jù)并回寫到 this.list，同時(shí)這個(gè) this.list 也會(huì)自動(dòng)通過 props 傳遞給組件。

當(dāng)時(shí)考慮到對數(shù)據(jù)的解耦，不想在父頁面中對數(shù)據(jù)進(jìn)行過多的處理，拿到服務(wù)端的JSON后直接交給組件，剩下的都在組件里實(shí)現(xiàn)。

所以對于組件來說，就要對 props 中接收到的數(shù)據(jù)進(jìn)一步處理，用來滿足樹型的相關(guān)要求。

首先，為了實(shí)現(xiàn)對樹型節(jié)點(diǎn)的展開/閉合操作，每個(gè)節(jié)點(diǎn)的數(shù)據(jù)對象都需要增加一個(gè)屬性(opened)，用來記憶節(jié)點(diǎn)的狀態(tài)，同時(shí)自動(dòng)渲染到Dom。

組件的處理邏輯：

步驟一：接收 props 中的 list 數(shù)據(jù)；

步驟二：在組件的?mounted 事件中遍歷 list 中當(dāng)前層級的節(jié)點(diǎn)列表數(shù)據(jù)對象，增加并初始化屬性 item.opened = false，即默認(rèn)閉合節(jié)點(diǎn)。

步驟三：如果存在子節(jié)點(diǎn)，則遞歸引用并掛載組件，同時(shí)將子節(jié)點(diǎn)列表數(shù)傳遞給組件，實(shí)現(xiàn)無限層級的樹型渲染。

注意：步驟二中為節(jié)點(diǎn)數(shù)據(jù)對象增加 opened 屬性需要使用 this.$set 函數(shù)，否則新增加的屬性將不支持與視圖的自動(dòng)響應(yīng)。

按照以上方式完成之后，發(fā)現(xiàn)第一層節(jié)點(diǎn)的 opened 屬性并沒有自動(dòng)響應(yīng)，通過調(diào)試發(fā)現(xiàn)組件的 mounted 事件只處理了第一次掛載時(shí)接收到的空數(shù)組，之后父頁面?zhèn)鬟^來的真實(shí)數(shù)據(jù)壓根沒經(jīng)過處理。

想了一下，才反應(yīng)過來，因?yàn)楦疙撁嬖趧?chuàng)建時(shí)就已經(jīng)觸發(fā)了組件的 mounted 事件；

后來從服務(wù)端返回JSON后，修改 props 時(shí)不會(huì)再次觸發(fā)組件的 mounted 事件，反而會(huì)觸發(fā) updated 事件，所以才造成了新增屬性無效的情況。

弄明白了問題所在，解決起來也很糾結(jié)，因?yàn)橹挥械谝粚咏M件的數(shù)據(jù)傳入是異步的，需要從 updated 事件進(jìn)行處理；

而更下層的組件都是掛載時(shí)就會(huì)傳入的，還需要從 mounted 進(jìn)行處理。

另一個(gè)問題就是，每次點(diǎn)擊節(jié)點(diǎn)時(shí)要修改 opened 屬性，而這時(shí)也會(huì)觸發(fā) updated 事件，所以初始化操作還是不能在 updated 中處理。

想明白了問題所在，就嘗試通過 this.$refs 來實(shí)現(xiàn)，在父頁面引用組件時(shí)，默認(rèn)先不通過 props 傳入 list 數(shù)據(jù)，而是在獲取服務(wù)端JSON之后，使用 this.$refs.comp.treeRoot(list) 向組件傳入，而組件本身的 mounted 事件用來處理第二層之后的組件數(shù)據(jù)初始化。

后來又嘗試用 watch 來解決，感覺比 ref 要簡潔一些，核心代碼如下：

watch: {

list: {

handler(newVal, oldVal){if(kit.isEmpty(oldVal) || oldVal.length === 0){this.opened = this.currentLevel < this.openLevel;

let list=JSON.parse(JSON.stringify(newVal));

list.forEach((item, i)=>{

item[this.attrOpened] = this.opened;

})this.treeList =list;

}

},

immediate:true}

}

總結(jié)

以上是生活随笔為你收集整理的uniapp延迟执行_【 vue / uniapp 】延迟加载数据的特殊处理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。