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 = 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就可以用这个了。原理:微任务队列的更新
连载中。。。