浏览器冻结 4-5 秒，直到 Vue 组件完成加载

Question

我有一个 Vue 组件：task.vue，它生成一个任务列表，还有一个 epic.vue 组件，它是 task.vue 的父组件，所以对于每个 epic.vue，我都会从 task.vue 生成它的任务列表。 问题是当我重新加载页面时，浏览器会冻结 4-5 秒，直到 task.vue 组件完全呈现。

每次我重新加载页面时，我都有一个从 api 函数获取所有数据的 ajax。它返回一个包含史诗（文件夹中的文件夹）的嵌套数组，每个都有自己的一组任务。它确实是一个大数组，可以包含 1000+ 条记录。

有没有办法在task.vue 组件加载时修复浏览器的冻结？

在我的epic.vue 中，我只需将prop 传递给task.vue 组件，其中包含当前史诗所具有的所有任务。

我的数组结构和vue渲染一模一样：https://vuejs.org/examples/tree-view.html。

Answer 1

如果加载时间与您正在加载的记录数直接相关，那么您可以考虑加载一个初始块（例如 100 条左右）以允许快速渲染，然后立即或根据需要延迟加载其余部分在相同大小的块中。