微信小程序数据更新优化方法之setData

项目场景：

笔者最近做一个微信小程序无限长列表的页面，但是发现特别卡，目前采用优化setData的方法来处理问题，后期将会用虚拟列表来优化。
在微信小程序中，我们经常需要更新页面数据，通常的做法是通过 setData 方法来实现。然而，如果我们频繁调用 setData，可能会导致性能问题。因此，我们需要一种优化方法来提高数据更新的效率。

---

常规方法

常规的数据更新方法是通过concat方法将新的数据添加到原有的数组中，然后调用setData更新数据。以下是一个示例：

console.log(data.data.list);
var tmp = that.data.vddata.concat(data.data.list);
that.setData({
  vddata: tmp
});

这种方法的问题是，每次更新数据时都会创建一个新的数组，这可能会导致性能问题。

优化方法：

我们可以通过创建一个新的对象，将需要更新的数据添加到这个对象中，然后一次性调用setData来更新数据。这种方法可以避免频繁调用 setData，从而提高性能。
以下是具体的步骤：

1.获取新的数据。
2.创建一个新的对象，例如 changeData。
3.将新的数据添加到 changeData 对象中。我们可以通过 changeData['array[' + index + ']'] = item; 的方式来为新数据创建 setData 的路径，其中 array 是需要更新的数组，index 是新数据在数组中的索引，item 是新的数据。
4.调用 setData 更新数据，例如 that.setData(changeData);。

---

示例代码：

以下是一个示例代码，展示了如何使用这种优化方法：

console.log(data.data.list);
let newData = data.data.list; // 新的数据
let changeData = {};
let index = that.data.vddata.length; // 获取当前数组的长度作为新数据的起始索引

// 将处理过的新数据添加到 vddata 数组
newData.forEach((item, i) => {
  changeData['vddata[' + (index + i) + ']'] = item; // 为新数据创建 setData 的路径
});

that.setData(changeData); // 更新数据

在这个示例中，我们首先获取了新的数据 newData，然后创建了一个新的对象 changeData，将新的数据添加到 changeData 对象中，最后调用 setData 更新数据。

结论：

这种优化方法可以有效地提高微信小程序的性能，特别是在需要频繁更新数据的场景中。我们应该尽可能地减少 setData 的调用，以提高应用的响应速度和用户体验。这种方法的关键在于使用索引changeData['array[' + index + ']'] = item;来创建新的数据路径，这样可以避免创建新的数组，从而提高性能。