wx:key的作用不仅是优化性能

// 假设原始数据
const periodList = [
  { id: 1, name: "上学期" },
  { id: 2, name: "下学期" },
  { id: 3, name: "暑假" }
]

// 数据更新后
const newPeriodList = [
  { id: 3, name: "暑假" },  // 位置变了
  { id: 1, name: "上学期" },
  { id: 4, name: "寒假" }   // 新增
]

// 没有 wx:key 的情况：
// 框架无法识别每个项的身份，可能重新渲染所有项
// 消耗性能

// 有 wx:key="{{item.id}}" 的情况：
// 框架通过id识别出：
// - id:3 只是移动了位置（复用DOM节点）
// - id:1 位置变化（复用）
// - id:4 新增（创建新节点）
// - id:2 被移除（销毁节点）

// 假设每个列表项包含输入框
periodList = [
  { id: 1, name: "数学", score: "" },
  { id: 2, name: "语文", score: "" }
]

// 用户在输入框中输入分数
// 如果没有 wx:key，列表重排会导致：
// 输入框1的值可能跑到输入框2
// 因为框架无法区分哪个DOM节点对应哪个数据

// 有 wx:key 时：
// 即使列表顺序改变，每个输入框的状态都会正确跟随对应的数据项

// 组件可能包含子组件
<view wx:for="{{list}}" wx:key="id">
  <!-- 子组件有复杂的生命周期 -->
  <custom-component data="{{item}}" />
</view>

// 有 wx:key：只有数据变化的项会重新渲染子组件
// 无 wx:key：列表任何变化都可能导致所有子组件重新渲染

// 点击事件获取对应项
handleItemClick(e) {
  const { id } = e.currentTarget.dataset.id
  // 通过id找到完整数据
  const item = this.data.periodList.find(item => item.id === id)
  
  // 常见场景：
  // 1. 删除操作
  this.deletePeriod(id)
  
  // 2. 编辑操作
  this.editPeriod(id)
  
  // 3. 查看详情
  this.viewPeriodDetail(id)
}

// 几乎所有CRUD操作都需要id
const apiUrls = {
  GET:    `/api/periods/${id}`,      // 获取详情
  PUT:    `/api/periods/${id}`,      // 更新
  DELETE: `/api/periods/${id}`,      // 删除
  POST:   `/api/periods/${id}/exams` // 创建关联数据
}

// 在本地缓存中快速查找
const cachedData = {
  'period_1': { name: '上学期', exams: [...] },
  'period_2': { name: '下学期', exams: [...] }
}

// 快速获取
const periodData = cachedData[`period_${id}`]

Page({
  data: {
    periodList: []
  },

   await wx.request({
      url: '/api/periods',
      method: 'GET'
    })
    
    this.setData({
      periodList: res.data.map(item => ({
        id: item.id,           // 用于wx:key
        name: item.name,
        subjectName: item.subject_name,
        createdAt: item.created_at
      }))
    })
  },

  // 2. 处理点击 - 需要id定位
  onPeriodClick(e) {
    const { id } = e.currentTarget.dataset
    
    // 跳转时传递id
    wx.navigateTo({
      url: `/pages/period/detail?id=${id}`
    })
  },

  // 3. 删除项目 - 需要id标识删除哪个
  async deletePeriod(id) {
    await wx.request({
      url: `/api/periods/${id}`,
      method: 'DELETE'
    })
    
    // 从列表中移除对应项
    this.setData({
      periodList: this.data.periodList.filter(item => item.id !== id)
    })
  },

  // 4. 更新项目 - 需要id定位
  async updatePeriod(id, newData) {
    await wx.request({
      url: `/api/periods/${id}`,
      method: 'PUT',
      data: newData
    })
    
    // 更新对应项
    this.setData({
      periodList: this.data.periodList.map(item => 
        item.id === id ? { ...item, ...newData } : item
      )
    })
  }
})

// ✅ 推荐：使用唯一ID
wx:key="id"
wx:key="{{item.id}}"

// ✅ 如果数据本身是唯一字符串/数字
wx:key="*this"  // 表示用item本身作为key

// ⚠️ 谨慎使用：索引（可能导致渲染问题）
wx:key="index"  // 只有在列表不会重排时才安全

// ❌ 不要用：会变化的字段
wx:key="name"   // 如果name可能重复或变化
wx:key="time"   // 时间戳可能重复

// 拖拽后列表顺序变化
onDragEnd(newList) {
  // 有wx:key的情况下：
  // 1. 框架能正确复用DOM节点
  // 2. 输入框状态不会混乱
  // 3. 动画效果更平滑
  
  this.setData({ periodList: newList })
}

// 加载更多时
 await fetchMoreData()
  
  this.setData({
    periodList: [...this.data.periodList, ...newItems]
  })
  // 有wx:key：只渲染新增项
  // 无wx:key：整个列表重新渲染
}