经过大佬指点,又有了优化。
上一篇文章(vue3论坛 评论和回复)中,写到二级评论是用userCommentId判断一下在渲染,这样的话其实会浪费资源。
新方法:一级评论加一个children(replyList)
let commentList = reactive<Comment[]>(
[
{
itemId: 这个用来区别帖子,
createdAt: 创建时间,
userInfo: {这里封装一下用来存放一级评论用户的信息
avatarUrl: 头像,
nickname: 名字,
userId:
},
userCommentId: 评论Id,
replyList:[] 存评论
userId: ,
isDel: 是否删除,
content: 内容,
updatedAt: 回复时间,
showReply: 展示回复框
},
]
);
这样的话后面就不用判断userCommentId可以直接渲染,肯定是避免了资源的浪费。
从后端角度来说也优化了,因为之前回复从后端接收数据的时候需要userCommentId,现在不用判断这个,那后端就可以不用传userCommentId字段,感谢大佬。