uniapp之列表渲染中key值的作用(vue.js)

参考：Vue列表渲染
(1) 列表渲染示例

<template>
    <view>
        <!-- array 中 item 的某个 property 作为 key -->
        <view v-for="(item,index) in nameList" :key="item.id">
            {{index +':'+ item.name}}
        </view>
        <!-- item 本身是一个唯一的字符串或者数字时，可以使用 item 本身 作为 key -->
        <view v-for="(item,index) in roleList" :key="item">
            {{index +':'+ item}}
        </view>
    </view>
</template>
<script>
export default {
  data () {
    return {
      nameList:[{
          id:0,
          name:'yaya'
      },{
          id:1,
          name:'yangyang'
      }],
      roleList:['车工','质检','机修']
    }
  }
}

</script>

(2) :key 值的选取

• 使用 v-for 循环 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
• 使用 v-for 循环中 item 本身，这时需要 item 本身是一个唯一的字符串或者数字

(3) key值的作用

当数据改变触发渲染层重新渲染时，会校正带有 key 的组件，框架会确保 ① 组件被重新排序，而不是重新创建，以确保 ②组件保持自身的状态，并且 ③提高列表渲染效率。

• 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input> 中的输入内容，<switch> 的选中状态），需要使用 :key 来指定列表中项目的唯一的标识符。
• 如不提供 :key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

(4) 拓展

• 过滤器：渲染列表时需要格式化字符串(如时间、价格格式化，字符长度限定等)，可参考过滤器的使用(数据源处理)来实现。