vue3 消息列表滚动到最底部自动向上

在 Vue 3 中，你可以在 `mounted` 钩子函数中使用 `ref` 获取消息列表容器的 DOM 元素，并在 `updated` 钩子函数中监听消息列表的变化，当有新消息时将容器滚动到底部。

以下是示例代码：

<template>
  <div class="message-list" ref="messageList">
    <!-- 消息列表内容 -->
  </div>
</template>

<script>
import { ref, onMounted, onUpdated } from 'vue';

export default {
  setup() {
    const messageList = ref(null);

    onMounted(() => {
      messageList.value.scrollTop = messageList.value.scrollHeight;
    });

    onUpdated(() => {
      messageList.value.scrollTop = messageList.value.scrollHeight;
    });

    return { messageList };
  },
};
</script>

在上面的代码中，我们使用 `ref` 创建了一个名为 `messageList` 的响应式引用，然后在 `onMounted` 钩子函数中获取到了消息列表容器的 DOM 元素，并将其滚动到底部。在 `onUpdated` 钩子函数中，我们监听了消息列表的变化，当有新消息时，将容器滚动到底部。最后，我们将 `messageList` 引用返回给模板使用。