vue 实现评论回复中，每次点击查看更多，增加10条评论(concat合并数组)

实现效果描述，pc端，纯vue+js，主要用到的是concat 合并数组
1，第一次进页面请求后台数据，拿到评论总条数和总页数，页面展示10条评论
2，点击查看更多，页面请求传startpage返回第二页的内容合并到上一个数组中，页面展示20条评论，再次点击继续增加10条直到展示完毕
完成这个功能需要知道concat的用法，
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
语法：arrayObject.concat(arrayX,arrayX,......,arrayX)
附上官方demo

输出：1,2,3,4,5

了解了用法之后开始做功能
附上代码
在data中定义数组和请求接口的参数

		startPage:1,
        pageTotal:1,
        totalComment:'',
        commentList:[],
        commentList2:[],

//初始化评论列表
      initCommentList(){
        let projectId = this.$route.query.projectId
        let startPage = this.startPage
        commentList({projectId,startPage}).then(res=>{
          if (res.errorCode === 0){
            this.commentList = res.body.commentList
            this.totalComment = res.body.rows
            this.pageTotal = res.body.pageTotal
            this.$emit('getTotal',this.totalComment)
          }
        })
      },

初始化得到总条数，总页数，和前十条评论

//查看更多评论
      showMoreComment(){
        if(this.startPage{
            if (res.errorCode === 0){
              this.commentList2 = res.body.commentList
              this.totalComment = res.body.rows
              this.commentList = this.commentList.concat(this.commentList2)//将得到的数据合并到上一次的数组中
            }
          })
        }else{
          this.$message({
            showClose: true,
            message: '没有更多了！',
            type: 'warning'
          });
          this.bigMore=true
        }

      },

在页面渲染的话就渲染commentList就行了 因为后面的数据已经合并进去了
我们来打印一下这个commentList

初始化时

console.log(this.commentList,'我是初始的10条数据');

点击更多时

console.log(this.commentList,'第',this.startPage-1,'次点击')

输出

好了效果完成 over！