Vuejs似乎在与v-模型斗争，当页面上有许多项目时。

Question

我有一个很简单的页面，上面有一个表单来提交一些数据，并在表格下面列出了一个列表，如图中所示：

​

​

该列表由api中的数据填充，每个对象都有4个属性(对于一个简单的列表来说不多)。目前，该列表共有130个元素。现在，如果我尝试在textarea中写一些东西，它恰好是非常慢的(2-10帧/秒)。添加到列表中的项目越多，获得的速度就越慢。顶部的表单有一个名为form的简单数据对象，如下所示：

form: {
  description: '',
  expired: '',
  applicationId: ''
}

有趣的是，列表和顶部的表单之间没有单一的数据共享，因此，它们应该独立运行。当我推荐出列表部分时，textarea再次变得非常快。

下面是显示列表的代码：

  <b-card no-body class="box-shadowed">
    <b-card-body v-if="appKeys.length === 0">
      <h5>Seems there is no key available.</h5>
    </b-card-body>
    <b-list-group v-else flush>
      <b-list-group-item
        v-for="(key, index) in appKeys"
        :key="key.id"
      >
        <div class="d-flex w-100 justify-content-between">
          <p class="text-danger h6"><span class="text-dark">{{ index + 1 }} - </span> <i>{{ key.id }}</i></p>
          <div>
            <b-button variant="primary" title="Edit" @click="openEditModal(key.id, key.description, key.expired)">
              <b-icon :icon="'pencil'"/>
            </b-button>
            <b-button variant="danger" title="Delete" @click="deleteKey(index, key.id)">
              <b-icon :icon="'trash'"/>
            </b-button>
          </div>
        </div>
        <template v-if="key.expired">
          <b-badge variant="info">Expires on: {{ key.expired | formatDate }}</b-badge>
          <br/>
        </template>
        <small>
          <b>
            <i>Created by: {{ key.createdBy }}</i> on {{ key.created | formatDateTime }}
          </b>
          <br/>
          {{ key.description }}
        </small>

      </b-list-group-item>
    </b-list-group>

如果我从文本区域中删除v-model="form.description"，问题就会再次消失。我认为问题可能是引导-vue中的<b-form-textarea>组件，但同样的问题也发生在一个简单的textarea输入上。

我试着检查vue开发工具面板，我可以看到，每次我在列表中有很多项目时，框架都在下降，但我不知道还需要检查什么。

有人知道为什么会发生这种事吗？这是一个vuejs限制，它可以处理多少项，或者我在某个地方有一些瓶颈代码？

EDIt

我可以使用v-once，页面将再次快速，但是当我添加新元素来更新下面的列表时，我需要这种反应性。

Answer 1

这是你所面对的某物。这里说：

对模板的依赖项的任何更改都将导致该组件的整个虚拟域的重新呈现。

当列表变得越来越大时，将会有更多的组件需要重新呈现。这会导致缓慢。一种解决方案是，您可以为列表所在的html部件创建子组件。因此，父组件中<b-form-textarea>中的任何输入更改都不会触发子组件的重新呈现。