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