当前位置：首页 > article >正文

vue3学习记录-nextTick

article 2024/12/26 11:20:33

vue3学习记录-nextTick

1. 案例场景
2. 使用方法
- 2.1 回调方式
- 2.2 async，await
3.原理

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 = 999999
    chatList.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
}