vue 限制渲染条数_对于Vue中的列表渲染，数据量很大时会渲染不出（程序卡死）...

爱被打了一巴掌 2022-10-26 14:09 12阅读 0赞

我有以下两个疑问：

①Vue对于这种列表渲染，底层的实现机制是什么？

②有什么好的方式解数据量过大的问题？

对于第二个问题，我想到的是：

a、由于视图是基于数据进行响应式渲染，只能对state分段赋值(setTimeout)

b、自己通过拼接数据，然后通过innerHTML 插入到DOM中

你们有什么好的解决方式吗？

对于这种列表的初始化，Vue的底层实现没有什么特别的，就是一条一条的往DOM里面insert，所以你有n条数据，就插入n次DOM，数据量很大，肯定卡。Vue在列表上的优势是列表初始化之后，对列表进行更新的时候，对DOM的操作优化与你自己手动操作。

这里我尝试了下渲染在离线元素下，然后将list一次性append到DOM里面。这样列表初始化就一次touch DOM，并且保留了Vue的特性。你可以尝试下：

https://jsfiddle.net/ygjack/8…

代码：

var list = document.createElement('div');

list.setAttribute('v-for', 'todo in todos');

list.innerText = '\{ \{todo.text\}\}';

var container = document.createElement('div');

container.appendChild(list);

var vm = new Vue(\{

el: container, // 渲染在离线元素container里面

data: function () \{

return \{

todos: \[

\{ text: 'Learn JavaScript' \},

\{ text: 'Learn Vue.js' \},

\{ text: 'Build Something Awesome' \}

\]

\}

\},

compiled: function () \{

this.$appendTo('\#mountNode'); // 将渲染结果一次性append在mountNode上

\},

ready: function () \{

console.log('ready');

setTimeout(function () \{

vm.todos.push(\{text: 'new todo' + new Date()\});

\}, 1000)

\}

\});

数据量很大的列表，不考虑做分页吗

你可以一次不渲染完，等到滚动条快到低的时候再渲染啊

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 条件渲染与列表渲染

文章目录 * vue 渲染 * * 条件渲染 * * v-if 与 v-else渲染以及 v-show * 列表渲染 ...

清疚/ 2024年04月18日 23:53/ 0 赞/ 99 阅读

相关 Vue 列表渲染

v-for 把一个数组对应为一组元素用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要使用 item in items 形式的特殊语法，i...

约定不等于承诺〃/ 2024年04月18日 23:05/ 0 赞/ 96 阅读

相关 Vue数据渲染

Vue数据渲染如何渲染渲染的语法：\{ \{…要渲染的内容\}\} —— 需要用两个花括号括起来要渲染的数据必须是 this 作用域可访问到的.

我就是我/ 2023年07月11日 12:34/ 0 赞/ 123 阅读

相关 vue 数据渲染

`{ {}}`在html中渲染,里面可以写代码,直接引用vue中的内容 <body> <div id="app"> <div>

小咪咪/ 2023年01月07日 07:21/ 0 赞/ 139 阅读

相关 vue 限制渲染条数_对于Vue中的列表渲染，数据量很大时会渲染不出（程序卡死）...

我有以下两个疑问： ①Vue对于这种列表渲染，底层的实现机制是什么？ ②有什么好的方式解数据量过大的问题？对于第二个问题，我想到的是： a、由于视图是基于数据进行响应

爱被打了一巴掌/ 2022年10月26日 14:09/ 0 赞/ 13 阅读

相关 vue.js列表渲染

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head

缺乏、安全感/ 2022年05月25日 13:39/ 0 赞/ 274 阅读

相关 Vue_条件渲染和列表渲染

一.条件渲染 1.v-if： v-if=‘name’ ：name值的true 或 false ，决定着这个标签的是否显示 2.v-show： v-show=‘sho

快来打我*/ 2022年05月22日 13:27/ 0 赞/ 293 阅读

相关列表渲染——Vue.js

1. v-for循环遍历数组 `（1）v-for` 指令需要使用 `item in items` 形式的特殊语法 <ul id="example-1">

悠悠/ 2022年04月22日 12:38/ 0 赞/ 265 阅读

相关 Vue列表渲染

列表渲染用\`v-for\`把一个数组对应为一组元素使用v-for遍历对象属性维护状态用`v-for`把一个数组对应为一组元素我们

墨蓝/ 2021年10月20日 00:26/ 0 赞/ 436 阅读

相关 Vue列表渲染

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

你的名字/ 2021年09月29日 04:16/ 0 赞/ 419 阅读