vue3 自动滚动到底部

<template>
  <div ref="container" class="container">
    <!-- 内容 -->
  </div>
</template>
 
<script>
import { ref, watchEffect } from 'vue';
 
export default {
  setup() {
    const container = ref(null); // 创建一个引用变量
    
    watchEffect(() => {
      if (container.value) {
        container.value.scrollTo({ top: container.value.scrollHeight }); // 滚动到底部
      }
    });
  
    return {
      container
    };
  },
};
</script>
 
<style scoped>
.container {
  height: 200px; /* 设置容器高度 */
  overflow-y: scroll; /* 显示垂直滚动条 */
}
</style>