list组件崩溃的还有另一个原因：同时使用for、if的一个bug

penghao@wifi.co

使用过list组件的开发人员都知道，list中的list-item组件在使用for、if的时候务必要保证当前item的唯一性，否则会导致渲染奔溃。 我整理出一个最精简的含有list组件的demo，这是一个有问题的demo：

1. <template>
2. <div>
3. <list class="items">
4. <block for="{{(k,v) in productList}}">
5. <list-item type="{{'product-'+v.tags.length}}" class="item">
6. <text class="title">{{v.title}}</text>
7. <text class="tags" for="{{(k2,v2) in v.tags}}" if="{{k2<3}}">
8. <span class="v">{{v2}}</span>
9. </text>
10. </list-item>
11. </block>
12. </list>
13. </div>
14. </template>
16. <script>
17. export default {
18. private: {
19. productList: [
20. {
21. title: 'this is a',
22. tags: [
23. 'a1', 'a22', '', 'a4', 'a5'
24. ]
25. },
26. {
27. title: 'this is b',
28. tags: [
29. 'b1', 'b2', 'b3', 'a4', 'b5'
30. ]
31. },
32. {
33. title: 'this is c',
34. tags: [
35. 'c1', 'c2', 'c3', 'c4', 'c5'
36. ]
37. }
38. ]
39. },
40. }
41. </script>
43. <style lang="less" scoped>
44. .items {
45. width: 100%; height: 100%; flex-direction: column; background-color: #f8f8f8;
46. .item {
47. flex-direction: column;
48. background-color: #fff;
49. margin: 10px;
50. padding: 10px;
51. .title {
52. font-weight: bold;
53. }
54. .tags {
55. flex-direction:row;
56. .v {
57. background-color: #f6f6f6; padding: 0 10px; margin: 10px;
58. }
59. }
60. }
61. }
62. </style>

复制代码

运行后，会发现，一上来就奔溃了，查下dom渲染结构会发现，会发现，出 无限输出a2，直至内存溢出，挂了。 解决方案： 1、前端上去更改模版上的for、if的关系：

1. <template>
2. <div>
3. <list class="items">
4. <block for="{{(k,v) in productList}}">
5. <list-item type="{{'product-'+v.tags.length}}" class="item">
6. <text class="title">{{v.title}}</text>
7. <text class="tags" for="{{(k2,v2) in v.tags}}">
8. <block if="{{k2<3}}">
9. <span class="v">{{v2}}</span>
10. </block>
11. </text>
12. </list-item>
13. </block>
14. </list>
15. </div>
16. </template>

复制代码

2、后端去修正返回的原始数据，或者前端拿到后，预处理一下数据，把空字符串变成 空格，也能避免：

1. <script>
2. export default {
3. private: {
4. productList: [
5. {
6. title: 'this is a',
7. tags: [
8. 'a1', 'a22', ' ', 'a4', 'a5'
9. ]
10. },
11. {
12. title: 'this is b',
13. tags: [
14. 'b1', 'b2', 'b3', 'a4', 'b5'
15. ]
16. },
17. {
18. title: 'this is c',
19. tags: [
20. 'c1', 'c2', 'c3', 'c4', 'c5'
21. ]
22. }
23. ]
24. },
25. }
26. </script>

复制代码

这是我踩过的坑，希望后来的人可以避免，或者期待官方可以尽快修复这种问题。

penghao@wifi.co

编辑器真难用，不支持code

tiantianhappy

{{v2}} 把if改成show呢 listitem 是原生的安卓组件 必须要保持内部的dom节点一致

penghao@wifi.co

tiantianhappy 发表于 2019-7-15 15:36 {{v2}}

改成 show 不能解决问题。因为 这块子数组循环里的个数是不确定的，

penghao@wifi.co

tiantianhappy 发表于 2019-7-15 15:36 {{v2}}

过了很多天之后，回来再回答你的问题。你说的方案是可以的，不过这么改：

1. <text class="v" show="{{k2<4}}"> {{v2}}</text>

复制代码