一个页面数据量过大时，vue渲染不出来，如何解决？

Question

如图，我做了一个区域选择页面，这个页面加载了两个json（一个全国区域，一个全国区县），数据量都庞大。在处理页面数据的时候，我还特意提前处理并保存赋值，以期减小vue渲染的压力，然而现在的问题是，当放到测试环境上，用手机浏览器打开就存在部分手机白屏，渲染不出来的问题：

作为对比，当我把页面上的dom节点全部注释掉，只留一个p标签，js及其他样式代码不改变的情况下：如图

之前无法渲染的手机都能正常显示了...故而说明：当数据量过大的时候，vue在渲染dom节点时，有可能无法渲染出来

那么我应该如何解决这个情况？

Answer 1

我建议是通过后台获取

1. 进入页面请求全国省的数据
2. 选中省，根据选择的省请求市
3. 选中市，根据选择的市请求区，依次类推

一次加载全国所有的区县的数据确实太大了

Answer 2

现在我有两个思路：第一是结合上拉加载的这种效果，分屏（分首字母组）加载每一组的内容；第二是看了这个回答传送

其实我比较倾向于这种（不对原设计做修改），但是他的那个拼节点的方式，我把很复杂的含vue语句的节点拼接后，无法渲染出来，如：`var _html = '<div class="addrMainItem" v-if="item.list.length>0" v-for="(item,index) in testAre">'+

                            '<div class="addrMainTitle" :id="item.label">{{item.label}}</div>'+
                            '<ul class="addrMainItemList">'+
                                '<li class="addrMainItemItem flex" v-for="(im,ix) in item.list" v-on:click="setlowArea(im)">{{im.name}}</li>'+
                            '</ul>'+
                        '</div>'
                        $("#addrMain").append(_html);`

Answer 3

会不会是一瞬间渲染3000多条数据导致的压力呢？换种思路，先将所有元素设置为display: none; 待渲染完成，再设置为initial，

this.cities = [...];
this.$nextTick(() => {
    this.display = 'initial';
});

Answer 4

你的业务中每个条目高度都是一定的，适合使用虚拟列表，数据缓存在内存中，根据滚动距离确定渲染条目，复用 DOM 元素，实现部分渲染，这不是 Vue.js 的问题，是你的 DOM 节点太多，而移动端设备性能较弱，浏览器渲染有压力了，解决方案的本质是控制渲染条目数量减轻浏览器渲染 DOM 的压力。