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);
   }