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

我有以下两个疑问：

①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)

}

});

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！