对于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)
}
});

回答:

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

回答:

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

回答:

我搞了一个按需渲染,可以参考一下:https://github.com/JesseZhao1…

回答:

https://juejin.im/post/5b5184…

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注