背景:父組件給子組件傳值,子組件需要對(duì)傳入的值進(jìn)行修改,并展示
父組件代碼:
子組件代碼:
出現(xiàn)的bug:watch中被調(diào)用了兩次鳄梅,導(dǎo)致數(shù)據(jù)重復(fù)數(shù)據(jù)
原因:watch中的參數(shù)用了deep屬性,監(jiān)聽傳入parentItemList的深層次的變化,在watch中調(diào)用countHot方法對(duì)數(shù)據(jù)進(jìn)行更改墩瞳。雖然已將父組件傳入的parentItemList值賦值給data中聲明的itemList,但當(dāng)前的賦值只是復(fù)制了指針(詳情查詢淺拷貝與深拷貝)氏豌。itemList與parentItemList指向同一個(gè)內(nèi)存地址喉酌,所以itemList在更改的過程中parentItemList也在更改,會(huì)再次被watch捕獲泵喘。父組件傳遞一次值子組件watch執(zhí)行兩次泪电。其中renderItem函數(shù)進(jìn)行了頁面數(shù)據(jù)流賦值操作,被執(zhí)行了兩次纪铺,導(dǎo)致出現(xiàn)數(shù)據(jù)重復(fù)bug
修復(fù)方式:
? ? ?使用JSON.parse(JSON.stringify(n))進(jìn)行深拷貝相速,這樣itemList修改的時(shí)候parentItemList不會(huì)再被修改,watch不會(huì)再被監(jiān)聽