v-for + key 使数据改变时 DOM 重排

---

title: v-for + key 使数据改变时 DOM 重排
date: 2019-01-02 22:26:19
tags: [Vue]
categories: Vue

---

疑问

最近做 Vue重构有赞商城 的项目时碰到一个问题：在购物车页面，左滑删除商品后，删除按钮的样式依然存在。

点击删除前：

youzan1.jpg

点击删除后，样式依然存在：

youzan2.jpg

原因

1. 首先，购物车中的商品都是用 v-for 渲染的，而我是通过 ref 结合 下标index 拿到商品的 DOM 节点的。
2. 我左滑点击删除时，实际上我做的是对数据删除的操作，而不是直接对 DOM 进行操作。所以其实 DOM 结构还是存在的。
3. 而 v-for 把数据填充到 DOM 结构的时候有“就地复用”的策略。简单理解就是会复用原有的 DOM 结构，尽量减少 DOM 重排（重新生成布局）来提高性能。（ v-for 在渲染时用的是虚拟 DOM ，将旧的和新的对比，根据差异再对 DOM 进行真实的渲染。）

解决方案

1. 还原 DOM 样式
   在删除商品的方法中，将样式还原即可：

this.$refs[`goods-${shopIndex}-${goodsIndex}`][0].style.left = '0px'

2. 绑定唯一识别key
   key 为每个节点提供身份标识，数据改变时会重排，所以最好绑定唯一标识。
   注意：如果用index标识可能得不到想要的效果，所以我在项目中使用了商品的 id 来作为 key 。