技術標籤：# Vue前端學習小程式

無論是使用小程式還是使用vue時，在for迴圈時都要繫結key

• 特別實在小程式中，不寫key的時候還會有一個警告，看著很難受，特別是對有強迫症的人來說

vue中

<ul>
    <li v-for="(item,index) in letters" :key="item">{{item}}</li>
</ul>

小程式中

<view wx:for="{{items}}" wx:for-item="item" wx:for-index
 
="index" wx:key="this">
  <view>{{item}}</view>
</view>

為什麼需要這個key屬性呢？

• 這個其實和虛擬DOM的Diff演算法有關係。

• 這裡我們借用React’s diff algorithm中的圖來簡單說明一下
  

• 當某一層有很多相同的節點時，也就是列表節點時，我們希望插入一個新的節點

  • 我們希望可以在B和C之間加一個F，Diff演算法預設執行起來是這樣的。
    

  • 即把C更新成F，D更新成C，E更新成D，最後再插入E，是不是很沒有效率？

    

• 所以我們需要使用key來給每個節點做一個唯一標識

  • Diff演算法就可以正確的識別此節點
  • 找到正確的位置區插入新的節點。

• 所以一句話，key的作用主要是為了高效的更新虛擬DOM。