$nextTick解決Vue組件卸載在加載合併的問題

• 2021 年 3 月 5 日
• 筆記
• VUE

情況是這樣的，父子組件都是複選框，點擊父組件的複選框，子組件的複選框要顯示並全選，取消複選框，子組件隱藏。子組件顯隱我用的 v-if ，使用created鉤子函數來使子組件處於全選狀態。

但是出現的問題就是點擊父組件的第一個複選框，在點擊第二個複選框，子組件並不會觸發v-if,只是更新了數據。倒是沒有出發子組件的created鉤子函數。

於是在父組件裏手動卸載組件並創建組件，第7行和第14行

然而並沒有效果

因為Vue會合併對重複數據的處理，並沒有卸載組件，而是一直使true的狀態

怎麼辦呢？

使用$nextTick(渲染更新完成的回調)

在第7行卸載後會渲染一個，我在卸載後在創建就不會合併了

這裡$nextTick 使微任務

如果使用setTimeout會發生抖動，由於使宏任務，會等待所有微任務執行完成後才會執行，雖然時間使0，但是還是有時長，卸載在創建中間出現消失在顯示的情況

代碼如下：

 1 　　　/**
 2      * 當選中狀態發生變化(是否是選中狀態,子組件的數據)
 3      */
 4     handleCheckedItemChange(isChecked, item){
 5       console.log(isChecked,item, "=============");
 6       // 卸載組件
 7       this.isShowDetail = false;
 8       this.sonDetail = item.sort ? item.sort : null
 9       this.isSelected = isChecked || false
10       // 因為vue會將重複的指令合併成一個,所以都沒走卸載組件，這裡使用$nextTick在渲染後進行(組件卸載後)在重新創建組件，
11       // 因為$nextTick 是微任務，而使用setTimeout是宏任務,時間過長，使窗口發生抖動，因為銷毀在創建中間消失一下
12       this.$nextTick(() => {
13         // 創建子組件
14         this.isShowDetail = true
15       });
16     }
17   },

開心的一天，有一種東西叫苦盡甘來，啊哈哈，昨天還在雨中導航，今天就有收穫了

一定要帶傘，因為天有不測風雲，啊哈哈

也希望每個人在下雨的時候都有個人撐着傘在等你