X
XiaoSong
V1
2023/02/04阅读:31主题:默认主题
vue的就地更新策略
就地更新策略
上一讲中提到了就地更新策略,这一讲中将详细讲解。所谓的就地更新就是当数据顺序发生改变的时候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>
同样的执行删除操作: 点击删除后:
达到了预期效果,添加操作同样可以。
作者介绍
X
XiaoSong
V1