javascript - 当页面上有很多项目时，Vuejs 似乎在与 v-model 作斗争

Question

我有一个简单的页面，顶部有一个表格，用于提交一些数据，表格下方有一个列表，如图所示:

列表由来自 api 的数据填充，每个对象有 4 个属性(对于一个简单的列表来说并不多!)。目前该列表共有 130 个元素。现在，如果我尝试在文本区域中写一些东西，它恰好非常慢(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"从 textarea 问题再次消失。 我认为问题可能出在 <b-form-textarea>来自 bootstrap-vue 的组件，但同样的问题也发生在简单的文本区域输入中。

我尝试检查 vue dev-tools 面板，每次我在列表中有很多项目时我都可以看到帧丢失，但我不知道还有什么要检查。

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

编辑

我可以使用v-once并且页面会再次变快，但是当我添加新元素以更新下面的列表时我需要这种 react 性..

Answer 1

有something你所面对的。这里说:

Any change to a template’s dependency will result of re-render of the whole virtual dom of that component.

随着列表越来越大，需要重新渲染的组件也会越来越多。这导致缓慢。一种解决方案是您可以为列表所在的 html 部分创建一个子组件。因此，<b-form-textarea> 中的任何输入变化在父组件中不会触发子组件重新渲染。