Javascript 如何添加显示而不在VueJS中重新渲染整个组件

我刚接触过拉威尔和Vuejs。我有一个问题，当点击“加载更多”按钮或向下滚动到底部时，整个组件都在重新渲染。按钮或滚动条的作用就像分页一样，但您所能做的就是加载更多或添加更多的显示。我的问题是如何在不重新渲染整个组件的情况下渲染新显示

我试着创建一个变量，其中它将传递将显示多少分页。是的，它完成了工作，但是组件正在重新呈现，来自服务器的回复的大小越来越大

以下是我在Vue组件上的脚本：

<script>
export default {
    props: ['user','review_count'],
    data(){
        return{
            reviews: {},
            limit: 2,
            scrolledToBottom: false,
        }
    },
    created(){
        this.getReviews();
        this.scroll();
    },
    methods: {
        getReviews: function(page){
            axios.get('/datas/reviews?user='+ this.user + '&limit='+ this.limit)
            .then((response) =>{
                this.reviews = response.data.data;
            })
            .catch(()=>{
            });
        },
        countType: function(data, type) {
            return data.filter(function(value) { return value.type === type }).length;
        },
        loadMore: function(){
            this.limit+=6;
            this.getReviews();
        },
        scroll () {
            window.onscroll = () => {
                let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight
                if (bottomOfWindow&&this.review_count>this.limit) {
                    this.loadMore();
                }
            }
        }
    }
}
</script>

---

在我看来，你需要做两件事

1/为了避免每次都增加限制，您应该研究在服务器上分页您的结果，这样您就可以从服务器请求下一页。现在，在每次连续呼叫中，您都会再次获取您已经拥有的内容，这将消除您减少服务器压力的目标

2/在客户端代码中，显然您也需要支持分页，但也要确保在循环元素上正确设置密钥。VueJS使用该键确定是否应在循环中重新渲染该特定元素

---

让我知道这是否有帮助

在我看来，你需要做两件事

1/为了避免每次都增加限制，您应该研究在服务器上分页您的结果，这样您就可以从服务器请求下一页。现在，在每次连续呼叫中，您都会再次获取您已经拥有的内容，这将消除您减少服务器压力的目标

2/在客户端代码中，显然您也需要支持分页，但也要确保在循环元素上正确设置密钥。VueJS使用该键确定是否应在循环中重新渲染该特定元素

---

让我知道这是否有帮助

我刚刚解决了自己的问题，解决方法是使用分页。每次对象向下滚动时，我都会将服务器中的所有数据推送到对象中

以下是我的向下滚动代码：

scroll () {
            window.onscroll = () => {
                let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight
                if (bottomOfWindow&&this.review_count>this.reviews.length) {
                this.getReviews();
                }
            }
        }

以下是我的getReviews（）代码：

---

我想出了这个主意，这样我就不会再使用分页来查看下一篇文章了。它更像是一个无限滚动分页组件。

我刚刚解决了我自己的问题，解决方案是使用分页。每次对象向下滚动时，我都会将服务器中的所有数据推送到对象中

以下是我的向下滚动代码：

scroll () {
            window.onscroll = () => {
                let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight
                if (bottomOfWindow&&this.review_count>this.reviews.length) {
                this.getReviews();
                }
            }
        }

以下是我的getReviews（）代码：

---

我想出了这个主意，这样我就不会再使用分页来查看下一篇文章了。它更像是一个无限滚动分页组件。

您所说的“不重新渲染整个组件”是什么意思？你能分享一下组件模板吗？它可以帮助我获得更多的上下文。我想做的只是像一个社交媒体墙类型的组件，它将只添加一个新的显示，而不是只重新渲染整个组件，只添加新的显示你所说的“不重新渲染整个组件”是什么意思？你能分享一下组件模板吗？它可以帮助我获得更多的上下文。我想做的只是像一个社交媒体墙类型的组件，它将只添加一个新的显示，而不是仅仅重新渲染整个组件来添加新的显示谢谢你的意见先生，我已经想出了一个解决方案，就像你的第一个意见一样。谢谢你的意见先生，我已经想出了一个解决办法，就像你的第一个意见一样。

getReviews: function(){
            let vm = this;
            axios.get('/datas/reviews?user='+ this.user + '&page='+ this.page)
            .then((response) =>{
                $.each(response.data.data, function(key, value) {
                                vm.reviews.push(value);
                                console.log((vm.reviews));
                        });
            })
            .catch(()=>{
            });
            this.page+=1;
        },