最近开发项目需要用到打印机，随着后台传回的数据会自动在屏幕上显示新增的数据，但是众所周知元素盒子不会随着滚动的内容增加而自动往下滚动，所以就产生了需求，思考之后实现了这个功能。

首先在需要实现的div盒子绑定上一个ref，名字随便定义，但是注意这个盒子需要设置固定高度和

overflow-y:auto样式，否则不会有滚动效果

<div class="execInfo" ref="containerRef">
	<p v-for="(item,index) in data" v-html="item"></p>
</div>


<style>
.execInfo {
    width: 100%;
    height: 400px;
    font-size: 16px;
	line-height: 33px;
	color:#606266;
	overflow-y: auto;
}

</style>

vue3取消了this.$refs获取节点的功能，我们只需要直接定义一个与你绑定在盒子上的ref属性名的同名变量就能拿到这个盒子的信息了,通过watch监听数据的变化，使用nextTick在dom更新之后再调用scrollBottom方法把盒子的距顶部高度调整为盒子的滚动高度，因为我们设置了盒子的固定高度和y轴的自动滚动，因此页面上会显示出数据不断增加，但是一直显示最新一条的底部数据的效果，到此功能完成。

const containerRef = ref();

let data = reactive();

watch(()=>data.length,()=>{
    nextTick(()=>{
        scrollBottom();
    });
})

const scrollBottom = ()=>{
    containerRef.value.scrollTop = containerRef.value.scrollHeight;
}

这个功能并不难实现，只是在思考的过程中遇到点小波折让我觉得有必要记录一下