微信小程序： wx:key詳解

一、代碼演示

未使用wk：key的源碼：

//<!--pages/mypage/mypage.wxml-->（wxml頁面結構文件） <switch wx:for = "{{numberArray}}" style='display : block;'>{{item}}</switch>// pages/mypage/mypage.js（js腳本文件） Page({/*** 頁面的初始數據*/data: {numberArray: [2, 2, 3, 4]},addToFront: function(e) {},addNumberToFront: function(e) {this.data.numberArray = [this.data.numberArray.length + 1].concat(this.data.numberArray)this.setData({numberArray: this.data.numberArray})}})

編譯后警告如下：在使用"wx:for"的時候你應該使用"wx：key"屬性，這樣可以提升效率。

VM1672:3 Now you can provide attr "wx:key" for a "wx:for" to improve performance.6 | </block>7 | > 8 | <switch wx:for = "{{numberArray}}" style='display : block;'>{{item}}</switch>| ^9 | <button bindtap='addNumberToFront'>Add to The Front</button>

官方解釋：當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，并且提高列表渲染時的效率。

我的理解：?在不使用?wx:key的情況下, 如果 array 內的數據發生改變，則會重新創建每個Item對象然后渲染列表（費時費力）
在使用?wx:key的情況下，如果array中的數據發生改變，只是將對應的對象重新排序。未發生變化的對象，不會重新創建(Very good)

二、如何使用

使用情況有兩種：
第一種：wk:key="字符串"，代表在for循環的array中的item的某個屬性名稱（property），需要是列表中唯一的字符串或者或者數字，且不會發生改變。例如：

objectArray: [{id: 5,name: "Tom"}, {id: 4,name: "Jan"}, {id: 3,name: "Mike"}, {id: 2,name: "Kangkang"}, {id: 1,name: "Meria"}, {id: 0,name: "Luna"}],

在該objectArray中能有唯一性的應該是id，所以應該寫成wx:key="id"
代碼如下

<!--pages/mypage/mypage.wxml--> <block><switch wx:for="{{objectArray}}" wx:key="id" style="display : block;">{{item.id}}</switch><button bindtap="randomSort">隨機交換數據</button> </block>// pages/mypage/mypage.js Page({/*** 頁面的初始數據*/data: {objectArray: [{id: 5,name: "Tome"}, {id: 4,name: "Jan"}, {id: 3,name: "Mike"}, {id: 2,name: "Kangkang"}, {id: 1,name: "Meria"}, {id: 0,name: "Luna"}]},randomSort: function(e) {const length = this.data.objectArray.lengthfor (let i = 0; i < length; i++) {const x = Math.floor(Math.random() * length)const y = Math.floor(Math.random() * length)const tmp = this.data.objectArray[x]this.data.objectArray[x] = this.data.objectArray[y]this.data.objectArray[y] = tmp}this.setData({objectArray : this.data.objectArray})}}})

第二種：wk:key="*this",代表在for循環中的item自身，這種表示需要item本身就是一個唯一的字符串或者數字。（偷懶不舉例子了）

三、最后

1、如果不提供wx:key，控制臺會輸出警告，如果明確知道該列表是靜態的，可以選擇忽視它。
2、我試了一下key的值如果重復的話，程序并不會出現什么異常，但是控制臺會輸出警告提示你key值重復了。還有第一次渲染的時候就有重復的key值，控制臺不會輸出警告。
3、就目前來看只要理解wx：key是干什么的，知道怎么用就可以了

總結

以上是生活随笔為你收集整理的微信小程序： wx:key详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。