1. 案例场景

聊天框实现输入内容，滚动条默认滚到最底部。

<template><div class="chat_box"><div class="chat_list" ref="chat_list"><div class="chat_item" v-for="(item, index) in menuList" :key="index"><span class="chat_item_name">{{ item.name }}:</span><span class="chat_item_message">{{ item.message }}</span></div></div><div class="chat_input" ><input type="text" placeholder="请输入内容" v-model="input" /><button @click="sendmsg">发送</button></div></div>
</template><script setup>
import { nextTick, ref,useTemplateRef } from 'vue'let input = ref('')
const chatList = useTemplateRef('chat_list')
const menuList = ref([{ name: '小南', message: '哈哈哈' },
])const sendmsg = () =>{menuList.value.push({ name: '小邱', message: input.value })chatList.value.scrollTop = 999999
}</script><style scoped lang="scss">
.chat_box{display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.chat_list{height: 200px;width: 350px;margin: 0 auto;background-color: lightblue;overflow-y: auto;.chat_item{display: flex;border: 1px solid #000;margin: 16px 0;}
}
.chat_input{width: 350px;
}
</style>

vue3.5以后通过useTemplateRef访问模板引用，3.5之前的用ref来访问。代码中也写了使得每次的scrolltop到达底部，怎么没效果呢？
vue的更新dom是异步的，sendmsg 是同步的，所以到达底部的总是差最后一条数据的，到底了但是又没有完全到底。
nextTick就起作用了。

2. 使用方法

2.1 回调方式

import { nextTick, ref,useTemplateRef } from 'vue'
const sendmsg = () =>{menuList.value.push({ name: '小邱', message: input.value })nextTick(()=>{//chatList.value.scrollTop = 999999chatList.value.scrollTop = chatList.value.scrollHeight})}

2.2 async，await

import { nextTick, ref,useTemplateRef } from 'vue'
const sendmsg = async () => {menuList.value.push({ name: '小邱', message: input.value })await nextTick()chatList.value.scrollTop = 999999
}

两种方法都可以达到效果。

3.原理

先学会用，反正获取不到dom，更新数据后还要操作dom就可以用这个了。原理：微任务队列的更新
连载中。。。