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

这篇关于vue.js - 对于Vue中的列表渲染，数据量很大时会渲染不出（程序卡死）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！