vue开发中出现警告Forced reflow while executing JavaScript took

这个问题我们用中文翻译一下:

执行JavaScript时强制回流

也就是哪里的操作 导致页面回流从而卡顿

什么是强制回流??

点我了解强制回流

我遇到的情况

我写了一个试题列表,列表里面有300题,每个题目有4个选项。起初我觉得有点卡,但是觉得数据量才这么点就卡很不合理就先放着没管。
直到我数据量到了500以上,那页面我滴天,真的迟钝!!

开始排查

首先判断是否哪里频繁使用v-if等导致的,我一块块注释重复运行发现并不是他的问题。
其次判断是否是数据渲染问题,因为我抽出了好几个组件以及v-for去循环渲染数据。在我一重重注释发现,只要把列表数据删了就不会卡顿了,但这不行啊。不能手有病我们就把手砍了对吧,我们需要找到到底哪里出现的问题。
最后在我刨根问底的过程中发现了我v-for了el-radio,看着是一点问题也没有,都是常规用法。但是一注释掉, 竟然不卡了??!!!

找到凶手

注释掉el-radio后不卡,这让我十分愤怒和发狂哈。因为我一直以为是我哪里渲染的问题,浪费我几个小时的时间。

寻找平替

不如简简单单input哈

上代码: 注释掉的是曾经的代码

    <ul class="topic-card-radio-wrapper">
          
          <li v-for="item in topicData.answerVOList" :key="item.id" class="topic-card-item">
            

            <input @change="checkedAnswer(item.id);" type="radio" :id="`exam-answer-${item.id}`"
              :name="topicData.questionId" :value="item.id" v-model="radio"
              :disabled="topicSettings && topicSettings.isDisabled" />
            <label :for="`exam-answer-${item.id}`"> <span>
                {{ item.sort }}
                <span>.span>
                {{ item.optionTitle }}
              span>
            label>
          li>
          
        ul>

完结, 如果使用el-raidio也可以解决这个问题 请指教!!

你可能感兴趣的:(踩坑,Vue,element-ui,vue,elementui)