這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
前言
平時在使用v-for的時候，一般會要求傳入key，有沒有像我一樣的小伙伴，為了省心，直接傳索引index，貌似也沒有遇到過什么問題，直到有一天，我遇到一個這樣的需求
場景
在一個下單界面，我需要去商品串列選商品，然后在下單界面遍歷顯示所選商品，要求后選的排在前面，而且選好商品之后，需要在下單界面給每個商品選擇發貨地，發貨地串列是通過商品id去介面取的，我的代碼長這樣：
- 下單界面呼叫商品組件
// 這里每次選了商品都是從前插入：list.value = https://www.cnblogs.com/smileZAZ/archive/2023/04/13/[...newList, ...list.value]
- 商品組件內部呼叫發貨地組件
<SendAddress v-model="address" :product-no="goods.productNo" placeholder="請選擇發貨地" @update:model-value="https://www.cnblogs.com/smileZAZ/archive/2023/04/13/updateValue"></SendAddress>
- 發貨地組件內部獲取發貨地址串列
onMounted(async () => { getList() }) const getList = async () => { const postData = https://www.cnblogs.com/smileZAZ/archive/2023/04/13/{ productInfo: props.productNo, } }上述代碼運行結果是，每次獲取地址用的都是最開始選的那個商品的資訊，百思不得其解啊，最后說服產品，不要倒序了，問題解決
解決程序
后來在研究前進重繪后退快取時，關注到了組件的key,詳細了解后才知其中來頭
重點：根據key復用或者更新，也就是key沒有變化，就是復用，變化了在更新掛載，而onMounted是在掛載完成后執行，沒有掛載的元素，就不會走onMounted
回到上述問題，當我們每次從前面插入資料，key的變化邏輯是這樣的
結論
最開始選中的商品key從1變成了2，最近選的是0，
而0和1是本來就存在的，只會更新資料，不會重新掛載，只有最開始選的那個商品key是全新的，會重新掛載，重新走onMounted，
所以每次選擇資料后，拿去獲取地址串列的商品資訊都是第一個的
解決以上問題，把key改成item.productNo就解決了
本文轉載于:
https://juejin.cn/post/7221357811287834680
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550045.html
標籤：其他
