vue分享卡住_对于Vue中的列表渲染，数据量很大时会渲染不出（程序卡死）

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

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

代码：

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)

}

});