Vue 监听对象数组（包含多个对象的数组）

问题描述：开始我是从后台请求到的数据，将数组保存到data中的commentList数组变量中，利用数组中的对象值来进行页面渲染，需要随时监听到数组中对象属性值的变化。

数据形式：

data() {
   commentList: [
        {
          commentid: "01fc7e2c-cded-4567-8059-e6e71f583396",
          content: "计算机系统标引论文内容特征的词语",
          create_time: "2019-05-07",
          isOpenReply: false,
          isShowComment: false,
          replys: Array(0),
          userid: "8",
          username: "wtt"
        }
   ]
},

页面渲染：

 

       {{item.username}}
       {{item.create_time}}
       

           

               {{item.content}}
               

                  查看回复
               
               
               

                  .......
               
            
        
    

 

监听：

watch: {
    commentList: {
      handler: function(newVal, oldVal) {
        // console.log("newVal:", newVal);
        // console.log("oldVal:", oldVal);
      },
      deep: true
    }
  },

 

  利用vue.$set()方法重置 ;   

showComment(item, index) {
    this.commentList.forEach(commentItem => {
        if (commentItem.commentid == item.commentid) {
          commentItem.isShowComment = !commentItem.isShowComment;
          this.$set(this.commentList, index, commentItem);   //将改变项利用$set()重置 
        }
    });
},