实现类似知乎的回答评论功能的方法在 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指令来绑定用户输入的评论内容，并使用元素来选择要添加到哪个节点下面。下面是一个组件的例子：