title: v-for + key 使数据改变时 DOM 重排
date: 2019-01-02 22:26:19
tags: [Vue]
categories: Vue
疑问
最近做 Vue重构有赞商城 的项目时碰到一个问题：在购物车页面，左滑删除商品后，删除按钮的样式依然存在。
点击删除前：
youzan1.jpg
点击删除后，样式依然存在：
youzan2.jpg
原因
- 首先，购物车中的商品都是用
v-for渲染的，而我是通过 ref 结合 下标index 拿到商品的 DOM 节点的。 - 我左滑点击删除时，实际上我做的是对数据删除的操作，而不是直接对 DOM 进行操作。所以其实 DOM 结构还是存在的。
- 而
v-for把数据填充到 DOM 结构的时候有“就地复用”的策略。简单理解就是会复用原有的 DOM 结构，尽量减少 DOM 重排（重新生成布局）来提高性能。（v-for在渲染时用的是虚拟 DOM ，将旧的和新的对比，根据差异再对 DOM 进行真实的渲染。）
解决方案
- 还原 DOM 样式
在删除商品的方法中，将样式还原即可：
this.$refs[`goods-${shopIndex}-${goodsIndex}`][0].style.left = '0px'
- 绑定唯一识别key
key 为每个节点提供身份标识，数据改变时会重排，所以最好绑定唯一标识。
注意：如果用index标识可能得不到想要的效果，所以我在项目中使用了商品的 id 来作为 key 。
