vue3页面自动滚动到底部

你可以使用 `ref` 来获取页面底部的元素，并在页面更新时将页面滚动到该元素。以下是一个示例：

<template>
  <div ref="messages" class="messages">
    <!-- 消息列表 -->
  </div>
</template>

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

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

    onMounted(() => {
      // 页面加载后将消息列表滚动到底部
      messages.value.scrollTop = messages.value.scrollHeight;
    });

    onUpdated(() => {
      // 页面更新后将消息列表滚动到底部
      messages.value.scrollTop = messages.value.scrollHeight;
    });

    return {
      messages
    }
  }
}
</script>

在这个示例中，我们使用了 `ref` 来获取消息列表的 DOM 元素，并使用 `onMounted` 和 `onUpdated` 钩子函数来在页面加载和更新时将其滚动到底部。具体来说，我们使用 `scrollTop` 属性将滚动位置设置为消息列表的高度（即滚动到底部）。