A：資料改變，導致重新渲染的兩種情況：

1：有wx:key的情況（不重新建立，僅改變順序）

新增元素或改變元素順序導致資料改變時，
會校正帶有Key的元件（可通過key識別各元件），
框架會根據“目前資料”，重新排序各元件，而不是重新建立，

使元件保持自身的狀態，列表渲染效率高。

2：無wx:key的情況（重新建立）

新增元素或改變元素順序導致資料改變時，
此時各元件沒有key(無法識別各元件)
框架會被迫根據“目前資料”重新建立各元件，

使元件重置初始狀態（原有狀態自然被清空），列表渲染效率低。

B：兩種情況的對比

C：什麼時候需要wx:key

1.需要wx:key的情況

1. 列表中專案的位置會動態改變或者有新的專案新增到列表中
2. 希望列表中的專案保持自己的特徵和狀態
   （如 <input/> 中的輸入內容，<switch/> 的選中狀態）

需要使用 wx:key 來指定列表中專案的唯一的識別符號。

2.可不需要wx:key的情況

如果明確知道該列表是靜態，或者不必關注其順序，可以不用加wx:key，忽略如下的警告。

不提供 wx:key的警告： 

D：wx:key的使用及wx:key的值

1：wx:key="字串"

這個”字串”代表在 for 迴圈的 array 中 item 的某個“屬性”
該“屬性” 的值需要是列表中唯一的字串或數字，且不能動態改變。
用於被遍歷的元件需要多個屬性的時候。

//test.js
      data: {
        input_data: [
          { id: 1, unique: "unique1" },
          { id: 2, unique: "unique2" },
          { id: 3, unique: "unique3" },
          { id: 4, unique: "unique4" },
        ]
      }
    //test.wxml
    <input value="id:{{item.id}}"   wx:for="{{input_data}}"  wx:key="unique"  />
 

2：wx:key="*this"

保留關鍵字”*this”代表在 for 迴圈中的 item 本身，
這種表示需要 item 本身是一個唯一的字串或者數字
用於元件僅需要一個屬性，且屬性值唯一。

//test.js
  data: {
    numberArray: [1, 2, 3, 4],
    stringArray:['aaa','ccc','fff','good']
  }
//test.wxml
   <input value="id:{{ item }}"   wx:for="{{numberArray}}"  wx:key="*this"  />
   <input value="id:{{ item }}"   wx:for="{{stringArray}}"  wx:key="*this"  />
  },

E：2個動態圖的原始碼

//test.wxml
<view class="container log-list">
<!--有wx:key-->
<input value="id:{{item.id}}"   wx:for="{{input_data}}"   wx:key="unique" />
<button bindtap="addToFront">
    前部插入元素
</button>
<button bindtap="switch">
    隨機排序
</button>
</view>
//test.js
Page({
  data: {
    input_data: [
      { id: 1, unique: "unique1" },
      { id: 2, unique: "unique2" },
    ] 
  },
  //前部插入元素函式
  addToFront: function (e) {
    const length = this.data.input_data.length + 1;
    this.data.input_data = [{ id: length, unique: 'unique_' + length }].concat(this.data.input_data)
    this.setData({
      input_data: this.data.input_data
    })
  },
  //隨機排序函式
  switch: function (e) {
    const length = this.data.input_data.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.input_data[x]
      this.data.input_data[x] = this.data.input_data[y]
      this.data.input_data[y] = temp
    }
    this.setData({
      input_data: this.data.input_data
    })
  }
})

//test.wxss
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
input {
    background: none repeat scroll 0 0 #FFEEEE;
     float: left;
     width: 240px;
    padding: 0 3px;
    padding-left:10px;
    height: 42px;
    color: #69737d;
    font-size: 16px;
    line-height: 42px;
    border: 1px solid #E70047;
    margin: 20rpx;
}
button{
  display: inline-block; 
  vertical-align: baseline; 
margin: 0 2px; 
margin-top:30rpx;
outline: none; 
 text-align: center; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
border-radius: .5em; 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
}