就地更新策略

上一讲中提到了就地更新策略，这一讲中将详细讲解。所谓的就地更新就是当数据顺序发生改变的时候dom的顺序结构不改变，只是改变dom上的相关数据或属性等，从而提高渲染性能。举例如下（这段代码没有加key）:

<div>
  <div class="list">
      <div class="item" v-for="(item, index) in dataList">
          {{ item.goodsId }}
          <input type="text">
          <button @click="deleteList(index)">删除</button>
      </div>
      <button @click="addItem">在index为1处添加一行</button>
  </div>
</div>

const dataList = reactive([
    { name: 'xiaomi', goodsId: '12'},
    { name: 'apple', goodsId: '13'},
    { name: 'redmi', goodsId: '14'}
])

const deleteList = (index) => { 
    dataList.splice(index, 1)
}

const addItem = () => { 
    dataList.splice(1, 0, { name: 'SAMSUNG', goodsId: '15'})
}

最终展示效果如下:

在第一行中输入xiaomi，然后删除第一行。发现文本框没有改变只改变了数字: 点击删除 最终效果

可见删除后的效果并不符合预期，这就是vue的就地更新策略导致的。当点击第一个删除的时候只是改变了第一个dom的内容（12变成了13）并没有被删除，文本框中的'xiaomi'是自己输入的，是dom的默认内容不会被改变。如图所示:

当点击在index为1出添加一行时，先在index为1出的文本框输入‘apple’ 点击添加后:

添加后原本的文本框为‘apple’的那一个位置并没改变，只是改变的内容（13变成15）。执行方式如图所示：

当加上 key之后如果值为index那么操作之后的效果和没加一样。如果key值为goodsId那么操作之后的效果就会达到预期。这是因为给Vue了一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素。

<div>
  <div class="list">
      <div class="item" v-for="(item, index) in dataList" :key="item.goodsId">
          {{ item.goodsId }}
          <input type="text">
          <button @click="deleteList(index)">删除</button>
      </div>
      <button @click="addItem">在index为1处添加一行</button>
  </div>
</div>

同样的执行删除操作: 点击删除后: 达到了预期效果，添加操作同样可以。