【微信小程序警告】setData 数据传输长度为 2336 KB，存在有性能问题！

1. 警告提示

2. 造成影响

点击列表按钮进入下一页的时候卡顿，多次点击后卡顿一段时间会跳转多次

3. 警告解读

① setData官方概念

② bug原因：页面渲染时数据太大，根据其他博文，一般出现在列表渲染时数据太大，setData的限制是1024kb

4. 定位bug位置，尝试解决

这个警告在我新写的带有列表下拉加载更多的页面里都有，先指定一个页面进行调试，以第一次警告数值为准，现在多次进入这个页面警告数值的大小不变的
（注意：改完热加载之后微信开发者工具停仍留在当前页且警告消失，再次进入仍然有警告，所以每次调试的时候都需要刷新开发者工具，从首页进入）

① 注释掉列表，警告消失：警告是列表引起的

② （可行）减小每页请求的条数

结果：加载第一页时不显示警告，加载第二页是警告长度减小了，但是还是超出，再设小一点可能不能触底了，这里再找找其它方法

③ （不可行）获取数据之后遍历一遍数据，只把需要的数据放在data里

结果：只少了2kb，这里似乎影响不大

④ （不可行）把标签里的处理数据的语句全去掉，提前遍历处理

结果：还是只减少2kb

⑤（可行）自定义组件排查

结果：前面不显示警告，最后显示1028kb，有效果，但是还是提示警告


结果：不显示setData长度的警告了
调试dict-tag组件：

1. 先把组件设置为空组件，判断是嵌套问题还是子组件内容的问题
   • 结果：不显示警告，证明组件嵌套并不影响
2. 将computed的数值换成data里的固定数据
   • 结果：显示警告，证明是否使用computed不影响
3. 现在每个item同时使用的两个dict-tag组件，改成一个
   • 结果：不显示警告，可能存在子组件同时加载问题
4. 将子组件的mounted获取数据的语句先注释掉
   • 结果：不显示警告
   • 处理1：把mounted的内容加nextTick回调，应该会有渲染时间差→不可行
   • 处理2：一点一点注释掉组件中的内容找到问题
5. 最终dict-tag组件处理：
   
6. 增加每页条数，重现一下bug，再看看custom-card父组件是否有影响
   
   注释掉custom-card，显示1931kb，因为custom-card组件内没有语句处理，这里先不处理自定义组件了

⑥（可行） 重复的引用组件换成原生的tab标签

结果：警告消失

5.点击按钮跳转页面卡顿问题

处理：v-for里的u-button按钮全部换成button原生标签按钮

6. 总结：可以减小setData的方式

1. 减小请求的每页数据的条数
2. 子组件利用v-if和异步进行渲染
3. 替换引用组件为原生组件：<u--text>→<text>、<u-button>→<button>