nextTick

<template>

  <div style="height: 300px;width: 200px;border: 1px solid #000;overflow-y: auto;" ref="box">

    <div v-for="item in chatList" :key="item" style="height: 30px;">

      {{ item.message }}

    </div>

  </div>

  <input type="text" v-model="message">

    <div @click="send">

      发送

    </div>

  </template>

 

  <script setup lang='ts'>

  import { ref, reactive } from 'vue'

 

  let chatList = reactive<Array<{ message: string }>>([])

  let message = ref('')

  const box = ref<HTMLDivElement>()

  let send = async () => {

    chatList.push({

      message: message.value

    })

    // 因为修改数据的操作是同步的，dom操作是异步的，所以慢一步

    //box.value!.scrollTop = 999999

 

    // 使用nextTick解决,把修改数据改为异步

    // 第一种

    // nextTick(()=>{

    //   box.value!.scrollTop = 999999

    // })

    // 第二种,把await下面所有代码都改为异步

    await nextTick()

    box.value!.scrollTop = 999999

  }

  </script>

 

  <style scoped lang='scss'>

 

  </style>