前端删除评论操作（局部更新数组）

​评论的删除是局部删除，把所点击的评论id号传递给后端，通知后端在数据库中删除数据，并且返回数据，但是在前端并不直接接收返回的数据，而是触发回调事件，在前端上进行删除评论，首先通过pId观察他是否为以及评论，如果为一级评论，也是就是他的pid为0，就直接通过foreach函数返回新的数组，如果pid号不等于0，就是二级评论，这个时候要通过find函数找到父评论，再通过foreach函数返回新数组

1.在VideoCommentItem组件中，对于要置顶的评论发布”topCommentCallback“事件

// 删除评论
const delComment = () => {proxy.Confirm({message: `确定要删除评论吗？`,okfun: async () => {let result = await proxy.Request({url:proxy.Api.userDelComment,params: {commentId: props.data.commentId,},});if (!result) {return;}mitter.emit("delCommentCallback",{pCommentId:props.data.pCommentId,commentId:props.data.commentId,});},});
};

在VideoComment组件中，不能简单的重新加载数据，

因为评论有很多二级评论，重新加载数据会造成卡顿等显现，所以先判断是否为以及评论，是的话，对以及评论直接加载，不是的话，由返回的pCommentId找到父评论，循环父评论的孩子评论，得到新的数组，即通过本地精准更新避免全量加载

onMounted(()=>{// 删除mitter.on("delCommentCallback",({pCommentId,commentId})=>{//  pCommentId: 父评论ID（0表示顶级评论）commentId: 要删除的评论IDif(pCommentId==0){// 如果是一级评论，没有父评论，即父评论ID为0dataSource.value.list=dataSource.value.list.filter(item=>{return item.commentId!=commentId})dataSource.value.totalCount--}else{// 找到父评论const pComment=dataSource.value.list.find(item=>{return item.commentId==pCommentId})pComment.children=pComment.children.filter(item=>{return item.commentId!=commentId})}})})
onUnmounted(()=>{mitter.off("delCommentCallback")
})

**tips：**为什么像置顶之类的就是后端做排序，删除之类的排序就在前端做
流程图

置顶操作：必须由后端排序

1.业务特性要求

• 全局排序规则：置顶是一个 需要持久化存储的排序操作，所有用户看到的置顶评论顺序必须一致。

• 动态权重计算：置顶可能涉及复杂规则（如置顶时间、权重值、管理员权限等），需后端统一计算。

2. 技术必要性

• 前端本地排序 → 其他用户看不到变化 ❌
• 后端存储排序 → 所有客户端同步 ✅

删除操作：优先前端处理
1.业务特性要求

• 即时反馈需求：用户期望删除后内容 立即消失，网络延迟会导致体验卡顿。
• 局部数据变更：删除操作仅影响单条数据，无需重新计算整个列表顺序。

2. 技术优势
   假设列表有 1000 条评论（含嵌套）
   前端删除 → 操作时间复杂度 O(n) ✅
   后端重载 → 网络传输 + 解析 + 渲染全量数据 ❌

​