实现类似知乎的回答评论功能的方法在 Vue 中是怎样的？

本文探讨了如何使用 Vue 来实现类似知乎的回答评论功能。通过分步讲解，文章介绍了如何创建树形数据结构来表示评论，如何使用组件和 Vuex 来管理评论状态，以及如何实现添加、展开和收缩评论等功能。文章中提供的代码示例和详细说明可以帮助开发者了解如何使用 Vue 的强大功能来创建交互式和用户友好的评论系统。

Vue是一款非常流行的前端框架，它的灵活性和易用性使得它在web开发中有着广泛的应用。知乎是一个非常流行的问答社区，它拥有庞大的用户群体和丰富的内容。在知乎中，回答下的评论功能是非常重要的。在本文中，我们将探讨如何使用Vue来实现仿知乎的回答评论功能。

1. 功能简介

在知乎中，用户可以在回答下进行评论。评论可以形成一个树状结构，其中每个节点表示一个评论，节点之间有父子关系。用户可以在每个节点下面添加自己的评论，同样会形成树形结构。为了方便用户查看，知乎还会展开和收缩评论。

下面是本文需要实现的功能列表：

1. 用户可以在回答下添加评论；
2. 评论可以形成树形结构；
3. 用户可以在每个节点下面添加评论；
4. 根据层级展示评论；
5. 用户可以展开和收缩评论。

2. 数据结构设计

在实现该功能之前，我们需要先设计数据结构。在知乎中，评论是树形结构，每个节点都有以下属性：

1. id: 节点的唯一标识符；
2. content: 节点的内容；
3. author: 节点的作者；
4. createTime: 节点创建时间；
5. children: 子节点列表。

下面是该数据结构的定义：

interface Comment {
  id: string;
  content: string;
  author: string;
  createTime: number;
  children?: Comment[];
}

对于每个回答，我们需要一个评论列表。因为可能有多个回答，我们需要将这些评论列表放到一个对象中，这样就可以通过回答的id来获取对应的评论列表。下面是该数据结构的定义：

interface CommentData {
  [answerId: string]: Comment[];
}

3. 实现步骤

3.1 显示评论

我们需要首先显示评论列表。为了展示树形结构，我们可以使用递归组件。递归组件是指组件可以在自身模板中调用自身。

在Vue中，可以使用组件的name属性来实现递归。下面是一个简单的组件：

该组件会递归地渲染所有的子节点。

3.2 添加评论

在添加评论时，我们需要指定要添加到哪个节点下面。因此，我们需要为每个节点添加一个唯一标识符。在本例中，我们使用UUID来生成唯一标识符。同时，为了方便操作，我们还在每个节点中保存它所属回答的id。

我们可以使用Vuex来管理状态。添加评论的流程如下：

1. 用户输入评论内容，并选择要添加到哪个节点下面；
2. 触发Vuex的Action，向服务器发送请求，在服务器中添加评论记录；
3. 添加成功后，服务器返回新的评论记录；
4. 触发Vuex的Mutation，将新的评论记录添加到状态中。

在组件中，我们可以使用v-model指令来绑定用户输入的评论内容，并使用<select>元素来选择要添加到哪个节点下面。下面是一个组件的例子：

在这个组件中，我们将用户输入的内容和选择的父节点id双向绑定到组件的data中。同时，该组件还接收一个comment属性，如果该属性存在，则表示该组件要添加到一个已有的评论下面；否则，该组件是要添加到回答下面的新评论。

在该组件的created方法中，我们检索该组件要添加的评论的子节点列表。如果当前组件是要添加到一个已有的评论下面，则使用它的子节点列表；否则，我们从Vuex的状态中获取所在回答的评论列表。

在组件的addComment方法中，我们可以调用Vuex的Action，来向服务器添加新的评论记录：

async addComment() {
  const { content, parentId } = this;
  const answerId = this.answerId;
  await this.addComment({ answerId, parentId, content });
  this.$emit("added");
}

在Action处理完毕后，我们触发added事件，以通知父组件刷新界面。

3.3 展开和收缩评论

展开和收缩评论是一项比较复杂的功能。需要记录每个节点的展开状态，并能够快速的获取所在节点和它的子节点。我们可以在Vuex的状态中记录每个节点的展开状态。

展开和收缩评论的流程如下：

1. 用户点击展开或收缩；
2. 触发Vuex的Mutation，更新对应节点的展开状态；
3. 组件根据展开状态，递归地渲染子节点。

这个功能我们需要编写一个递归组件。组件会根据节点是否展开来决定是否渲染子节点。在该组件中，我们还需要编写一个展开和收缩按钮。下面是该组件的代码：

在该组件中，我们使用Vuex中的expanded状态来记录每个节点是否展开。在组件的computed中，我们使用该状态来判断当前节点是否展开。在组件的methods中，我们使用Vuex的Mutation来更新展开状态。

展开状态的处理逻辑很简单，我们只需要在Mutation中将对应的节点的展开状态取反即可：

toggle(state, id) {
  state.expanded[id] = !state.expanded[id];
},

4. 总结

本文介绍了如何使用Vue实现仿知乎的回答评论功能，包括评论的树形结构、添加评论、展开和收缩评论。Vue的组件、状态管理和递归组件等特性，为实现该功能提供了非常便利的支持。如果您想尝试实现仿知乎的回答评论功能，本文提供了非常好的参考。

今天关于《实现类似知乎的回答评论功能的方法在 Vue 中是怎样的？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！