关于uniapp:uniapp踩坑记录uview的collapse组件面板打开时获取数据不显示内容以及显示慢的问题

环境

HBuilder X 3.1.18
uview-ui 1.8.4

问题形容

应用 uview-ui 的 collapse 组件, 当某个面板关上时，获取数据并更新内容

<template>
    <view>
        <u-collapse>
            <u-collapse-item
                title="title"
                v-for="(item, index) in list"
                @change="handleOpenChange(item, index)"
            >
                {{item.content}}
            </u-collapse-item>
        </u-collapse>
    </view>
</template>

<script>
    export default {data() {
            return {
                list: [{content: ''}, {content: ''}]
            };
        },
        methods: {handleOpenChange(item, index) {this.list[index].content = '我是内容';
            }
        }
    }
</script>

以上代码，当组件面板关上时，内容并不显示，调试发现 DOM 中已有内容，但高度为 0

解决

1. 查看文档
   
   尝试调用 init 办法，内容胜利显示，但有重大的性能问题，当 item 较多时，十分卡顿，查看源码发现 init 办法会循环解决所有的子元素

2. 查看 u -collapse-item.vue 源码
   
   组件外部有 queryRect 办法用于更新内容高度
   故批改代码如下
   首先给 u -collapse-item 增加 ref 属性

   <u-collapse-item
     title="title"
     v-for="(item, index) in list"
     ref="collapseItem"
     @change="handleOpenChange(item, index)"
   >

   再批改事件处理办法，调用以后 item 的 queryRect 办法，问题解决

   handleOpenChange(item, index) {this.list[index].content = '我是内容';
     // 实测如果用 $nextTick，在 android 端依然有概率获取不到高度，故改用 setTimeout
     setTimeout(() => {this.$refs.collapseItem[index].queryRect();}, 100);
   }