HTML 页面中通过 cdn 的方式引入 vuejs,在渲染列表时整个页面卡死,渲染的数据大概 100 条左右
发布于 5 天前 作者 huaer 143 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

HTML 页面中通过 cdn 的方式引入 vuejs,在渲染列表时整个页面卡死,渲染的数据大概 100 条左右.
这是代码的效果图,这是一个三级下拉分类,每个大类下面的数据只有 10 多条数据,二级分类下面也只渲染了 10 多条数据,但是在渲染三级类目的时候页面直接卡死,三级分类的数据也不会就 10 条就左右。请问这种问题改如何处理?

以下是渲染的代码

ps:这个是直接在 html 中引入 js 文件来使用 vue 的

3 回复

谢谢大家的回复,这个问题没有检查出具体问题……
我采用另外一种方式来实现了,本来是三个数组嵌套循环的,现在全部拼接成一个多维数组去进行循环。
在循环多维数组的时候,不知道是不是数据量还是其他问题,没有渲染成功,这里采用的强制渲染才成功。

1、我不大相信vue性能会这样子 是不是你死循环了啥的
2、如果真是性能问题,你可以试试把渲染的对象先用Object.freeze处理下试试,源码链接:https://github.com/vuejs/vue/tree/dev/benchmarks/big-table

v-for指令配合key使用能提高渲染效率
v-for指令不要和v-if混用,可以尝试将数组过滤之后再进行迭代
v-if="false"这里没太看明白意思
另外赞同楼上的说法,以上三点都没有做到也不至于一百条数据会卡死,你可以试着排除网络请求或者其他地方的耗时

回到顶部