vue3学习记录-nextTick

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
}

在这里插入图片描述
两种方法都可以达到效果。

3.原理

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/906479.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Nature Medicine病理AI汇总|TORCH:预测未知原发部位癌症的肿瘤起源|顶刊精析·24-11-01

小罗碎碎念 今天分析Nature Medicine病理AI系列的第三篇文章——《Prediction of tumor origin in cancers of unknown primary origin with cytology-based deep learning》 这篇文章报道了一种基于细胞学图像的深度学习方法TORCH&#xff0c;用于预测未知原发部位癌症的肿瘤…

关于SQLServer在局域网内无法连接的问题的解决思路

针对SQL Server 2008在局域网内无法连接的问题&#xff0c;以下是一些详细的解决办法。我们在过程中需要用到Microsoft SQL Server 2008和Microsoft SQL Server tools 2008数据库软件中的配置管理器以及SQL Server Management Studio工具&#xff0c;入下截图所示。 一、检查网…

Ubuntu22.04 安装图形界面以及XRDP教程

一、准备环境 1.一台服务器安装系统ubuntu&#xff08;这里大部分ubuntu系统可以同用&#xff09; 2.安装的ubuntu系统未安装图形界面 二、操作步骤 1.远程ssh或者直接登录服务器命令行界面 ssh -p 远程端口 rootIP 2.更新系统软件包 sudo apt update # 更新本地的软件包…

【运动的&足球】足球运动员球守门员裁判检测系统源码&数据集全套:改进yolo11-DBBNCSPELAN

改进yolo11-FocalModulation等200全套创新点大全&#xff1a;足球运动员球守门员裁判检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.28 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示…

【特征值处理】

【特征值处理】 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 在处理机器学习的相关数据时&#xff0c;需要把特征值与目标组成二组&#xff0c;请您输出处理后的结果。 输入 第一行输入特征值向量&#xff0c;第二行输入目标向量。 输…

异步电机转差率和工作原理,异步电机和同步电机的区别

一、异步电机 异步电机的工作原理基于转差率&#xff08; s s s&#xff09;&#xff0c;而转差率的大小决定了电机是作为电动机还是发电机运行。为了深入理解其中的原理&#xff0c;我们可以从电磁感应和转速关系来分析&#xff1a; 1. 电动机工作原理 异步电机工作时&…

《双指针篇》---移动零

题目传送门 这道题可以归类为 数组划分/数组分块 。 题目制定了一个规则&#xff0c;我们可以在这个规则下&#xff0c;将数组划分为若干个区间。 这道题让我们把所有非零元素移动到左边。所有零元素移动到右边。 将数组划分为&#xff1a; 左区间非0&#xff1b; 右区间&…

龙迅#LT6211适用于HDMI转4PORT LVDS,分辨率高达4K60HZ,可提供技术支持!

1.特点HDMI1.4接收器 符合HDMI 1.4规范&#xff0c;TMDS数据速率每通道高达3.4Gbps 支持HDCP 1.4 自适应接收器均衡的PCB、电缆和连接器损耗 单/双端口/四端口LVDS发射机 兼容VESA和JEIDA标准 1/2/4可配置端口 1时钟通道和每个端口有4个可配置的数据通道 数据通道…

Linux——Ubuntu的基础操作

压缩与解压缩 gzip压缩工具 创建文件 a.c和b.c touch a.c touch b.c 压缩文件a.c和b.c gzip a.c gzip b.c 解压缩a.c.gz和b.c.gz gzip -d a.c.gz 对文件夹进行压缩 gzip -r 对文件夹进行解压缩 gzip -rd 注意&#xff1a;这只是对文件夹里所有文件进行压缩&#xff0c…

HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码CSS部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品…

基于Transformer的路径规划 - 第五篇 GPT生成策略_解码方法优化

上一篇&#xff1a;基于Transformer的路径规划 - 第四篇 GPT模型优化 在上一篇中&#xff0c;我尝试优化GPT路径生成模型&#xff0c;但没有成功。在随机生成的测试集上&#xff0c;路径规划成功率只有99%左右。而使用传统的路径规划算法&#xff0c;例如A*&#xff0c;路径规划…

【HarmonyOS】鸿蒙系统

文章目录 前言一、鸿蒙OS概述1. 定义与特性2. 核心技术理念3. 技术架构设计1. 应用层2. 框架层3. 系统服务层4. 内核层 二、分布式架构分布式架构的核心理念分布式能力的实现关键技术 三、 总结 前言 鸿蒙OS是由华为推出的一款开源操作系统&#xff0c;旨在满足智能终端设备的…

[MySQL]介绍与基础指令

介绍 现在常见的数据库如:Oracle、DB 2、SQL Server、MySQL等都是关系型数据库&#xff0c;使用二维表格来存储数据。 关系结构型数据库系统 管理员 仓库 MySQL的数据存储目录为data&#xff0c;在data下的每个目录都代表一个数据库。 MySQL的安装目录下&#xff1a; bin目录…

智慧农业云平台:大数据赋能现代农业的未来

近年来&#xff0c;随着科技的迅速发展&#xff0c;农业作为传统行业正面临着前所未有的变革。智慧农业&#xff0c;作为现代农业发展的重要方向&#xff0c;借助云计算、大数据、物联网等技术&#xff0c;正在为农业生产、管理和服务提供全新的解决方案。在这个背景下&#xf…

Windows基础(1)

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 声明&#xff1a;本文主要用作技术分享&#xff0c;所有内容仅供参考。任何使用或依赖于本文信息所造成的法律后果均与本人无关。请读者自行判断风险&#xff0c;并遵循相关法律法规。 感谢泷…

Pandas CSV学习

1.CSV文件简介 CSV&#xff08;Comma-Separated Values&#xff0c;逗号分隔值&#xff0c;有时也称为字符分隔值&#xff0c;因为分隔字符也可以不是逗号&#xff09;&#xff0c;其文件以纯文本形式存储表格数据&#xff08;数字和文本&#xff09;。CSV 是一种通用的、相对简…

Visual Studio | 配置管理

文章目录 一、配置管理1、项目属性1.1、常规1.2、VC 目录1.3、C/C -> 常规1.4、C/C -> 预处理器1.5、C/C -> 预编译头1.6、连接器 -> 常规1.7、连接器 -> 输入 2、编辑2.1、显示空格或tab符 一、配置管理 1、项目属性 1.1、常规 字段功能目标平台版本用于生成…

数据采集-Kepware 安装证书异常处理

这里写目录标题 一、 问题描述二、原因分析三、处理方案3.1 1.执行根证书的更新3.2 安装KepServerEx 资源 一、 问题描述 在进行KepServerEx进行安装的情况下&#xff0c;出现了如下的报错&#xff1a; The installer was unable to find required root certificates ,please …

递归到分治

一、递归与分治&#xff1a; 1、递归&#xff1a;如果一个问题分可以简化为某些更小的、更简单的子问题来解决&#xff0c;那么可以用递归 2、分治&#xff1a;如果想并行处理&#xff0c;可以用到分治 二、假设我们有一段文本&#xff0c;需要统计每个单词出现的频率。我们将…

什么是护网(HVV)需要什么技术?(内附护网超全资料包)

文章目录 一、什么是护网行动&#xff1f;二、护网分类三、护网的时间四、护网的影响五、护网的规则六、什么是红队&#xff1f; 6.1、红队测试的意义 七、什么是蓝队 一、什么是护网行动&#xff1f; 护网行动是以公安部牵头的&#xff0c;用以评估企事业单位的网络安全的…