Vue.js 如何提高大型Vue组件的性能

我目前正在做一个表单编辑器（比如谷歌表单）。它是一个vue组件，基本上如下所示：

<script>
export default {
  data() {
    return {
      questions: [Array of objects describing form questions]
    }
  }
}
</script>

<template>
  <div class="form-editor">
    <!-- some interface not related to a specific question (like creating a new question) -->
    <div v-for="question in questions" :key="question.id">
      <input v-model=question.title>
      <!-- more inputs binded to a specific question properties via v-model -->
    </div>
  </div>
</template>

导出默认值{
数据（）{
返回{
问题：[描述表单问题的对象数组]
}
}
}

---

它工作得很好，但是当问题数量增加时，它会遇到巨大的性能问题。我是否应该将与单个问题相关的逻辑提取到单独的组件中，以在v-for循环中呈现它？或者我该怎么办？

也许你应该考虑在滚动条上进行分页或动态加载？有多大？如果更少，可能是因为您正在更新所有问题，而其中只有一个问题发生了更改，那么在输入更新数据时，您是否可以显示更多的代码？