vue3 实现滚屏显示

在 Vue3 中实现滚屏显示可以使用 Vue3 的新特性 `ref` 和 `watchEffect`。

首先，在模板中创建一个包含滚动内容的容器，如下所示：

<template>
  <div ref="scrollContainer" style="overflow-y: scroll; height: 200px;">
    <div ref="scrollContent">
      <!-- 滚动内容 -->
    </div>
  </div>
</template>

然后，在组件的 `setup` 方法中使用 `ref` 创建对滚动容器和滚动内容的引用：

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

export default {
  setup() {
    const scrollContainer = ref(null);
    const scrollContent = ref(null);

    // 监听滚动容器的滚动事件
    watchEffect(() => {
      scrollContainer.value.scrollTop = scrollContent.value.scrollHeight;
    });

    return {
      scrollContainer,
      scrollContent,
    };
  },
};
</script>

以上代码会监听滚动容器的滚动事件，当滚动容器中的内容发生变化时，会自动滚动到底部。