vue 渲染浏览器崩溃

Question

在使用数据v-for渲染时

这是导航栏

这是内容

两个都存在for循环渲染数据

如果是两个同时加载，浏览器就会奔溃，数据量并不大 在20条左右

如果是先将内容注释掉，加载了导航栏之后，再把注释去掉 就能正常运行，但一刷新，两个同时加载了，浏览器就又奔溃了。

请问 该怎么解决

Answer 1

用v-if控制一下渲染条件看看

Answer 2

碰到了一样的问题，渲染的时候浏览器崩溃

是在滑到底加载下一页的时候，分页效果，写过好几次这种效果，这是头一次碰到

    methods: {
        //滚动条在Y轴上的滚动距离
        getScrollTop() {
            let scrollTop = 0,
                bodyScrollTop = 0,
                documentScrollTop = 0;
            if(document.body) {
                bodyScrollTop = document.body.scrollTop;
            }
            if(document.documentElement) {
                documentScrollTop = document.documentElement.scrollTop;
            }
            scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
            return scrollTop;
        },
        //浏览器视口的高度
        getWindowHeight() {
            let windowHeight = 0;
            if(document.compatMode == "CSS1Compat") {
                windowHeight = document.documentElement.clientHeight;
            } else {
                windowHeight = document.body.clientHeight;
            }
            return windowHeight;
        },
        //文档的总高度
        getScrollHeight() {
            let scrollHeight = 0,
                bodyScrollHeight = 0,
                documentScrollHeight = 0;
            if(document.body) {
                bodyScrollHeight = document.body.scrollHeight;
            }
            if(document.documentElement) {
                documentScrollHeight = document.documentElement.scrollHeight;
            }
            scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
            return scrollHeight;
        }
    },
},
mounted(){
    this.defaults(this.currentPage);
    window.onscroll = () => {
        if(this.getScrollTop() + this.getWindowHeight() == this.getScrollHeight()) {
            this.defaults(++this.currentPage);
        }
    };
},