vue 相鄰自定義組件渲染錯誤正確的打開方式

話很少說看問題：

當封裝自定義組件時例如（自定義下拉列表）兩個相同的組件在屢次v-if變化時偶爾會發生渲染錯誤，明明賦值正確可是組建中的ajax方法可能返回的數據亂掉，或者其餘神邏輯錯誤。

 

通過查詢發現正確的作法，在官網中已經明示：

 

key

• 預期：number | string

  key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。若是不使用 key，Vue 會使用一種最大限度減小動態元素而且儘量的嘗試修復/再利用相同類型元素的算法。使用 key，它會基於 key 的變化從新排列元素順序，而且會移除 key 不存在的元素。

  有相同父元素的子元素必須有獨特的 key。重複的 key 會形成渲染錯誤。

  最多見的用例是結合 v-for：

  <ul>
   <li v-for="item in items" :key="item.id">...</li>
  </ul>

  
  

  它也能夠用於強制替換元素/組件而不是重複使用它。當你遇到以下場景時它可能會頗有用：

  • 完整地觸發組件的生命週期鉤子
  • 觸發過渡

  例如：

  <transition>
   <span :key="text">{{ text }}</span>
  </transition>

  當 text 發生改變時，<span> 會隨時被更新，所以會觸發過渡。

～～～～～～～～～

因此處理的方法就是給自定義組件增長 key 區分不一樣 。

具體內容請參見 x乎 答案

https://www.zhihu.com/question/61064119