当前位置: 首页 > news >正文

vue3使用nextTick

  1. 发现nextTick必须放在修改一个响应式数据之后,才会在onUpdated之后被调用,如果nextTick是放在所有对响应式数据修改之前,则nextTick里面的回调函数会在onBeforeUpdate方法执行前就被调用了。可是nextTick必须等到onUpdated执行完成之后执行,才能拿到渲染得到的dom
  2. 下面发请求的时候是没有使用async的(Promise的语法糖),它里面的then函数对serverRef的修改,会再一次触发组件重新渲染,也就是onBeforeUpdate和onUpdated又被回调了一次,也就是说,下面的toggleColor这个方法,触发了2次渲染。
---onBeforeMounted---
RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: null, _value: null}
---mounted---
RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: span, _value: span}
halo world
---onBeforeUpdate---
---onUpdated---
RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: button, _value: button}
nextTick1
res ojbk
---onBeforeUpdate---
---onUpdated---
nextTick2
<template><div style="display: flex;"><ul class="ul-list"><li v-for="i in num" :id="'li'+i" >{{ i }}</li></ul><div class="div-desc"><input type="text" v-model="n"><button @click="handleClick">修改num</button><br><br><button @click="toggleColor">切换span颜色</button><span ref="spanRef" :style="{color:colorRef}">span</span>*{{ serverResp }}*<button v-if="isShow" ref="btnRef">dd</button></div></div></template><script lang="ts" setup>import { ref,reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,nextTick,getCurrentInstance } from 'vue'const { proxy } = getCurrentInstance()let num = ref(10)let n = ref(10)const btnRef = ref(null)let isShow = ref(false)let serverResp = ref('')const spanRef = ref(null)const handleClick = () => {num.value = parseInt(n.value)}const colorRef = ref('')const toggleColor = () => {debuggerproxy.Request({url:'http://localhost:8083/test'}).then(res=>{debuggerconsole.log('res',res);serverResp.value = resnextTick(()=>{ // 要放在对响应式数据修改之后debuggerconsole.log('nextTick2');})})debuggerisShow.value = truenextTick(()=>{  // 要放在对(至少一个)响应式数据修改之后,// 否则这里函数调用将拿不到btnRef,必须要等到onUpdated回调之后,执行nextTick里面的回调才能拿到btnRefdebuggerconsole.log(btnRef); console.log('nextTick1');})if(colorRef.value === 'red') {colorRef.value = 'blue'} else {colorRef.value = 'red'}num.value = num.value - 1debuggerconsole.log('halo world');}onBeforeMount(() => {console.log('---onBeforeMounted---')console.log(spanRef);})onMounted(()=>{console.log('---mounted---')console.log(spanRef);spanRef.value.style.color = 'cyan'}) onBeforeUpdate(()=>{debuggerconsole.log('---onBeforeUpdate---')})onUpdated(()=>{debuggerconsole.log('---onUpdated---')})</script><style lang="scss">.ul-list {width: 100px;}.div-list { width: 300px;}
</style>

在这里插入图片描述

相关文章:

vue3使用nextTick

发现nextTick必须放在修改一个响应式数据之后&#xff0c;才会在onUpdated之后被调用&#xff0c;如果nextTick是放在所有对响应式数据修改之前&#xff0c;则nextTick里面的回调函数会在onBeforeUpdate方法执行前就被调用了。可是nextTick必须等到onUpdated执行完成之后执行&a…...

传统图像处理之颜色特征

博主简介 博主是一名大二学生&#xff0c;主攻人工智能研究。感谢让我们在CSDN相遇&#xff0c;博主致力于在这里分享关于人工智能&#xff0c;c&#xff0c;Python&#xff0c;爬虫等方面知识的分享。 如果有需要的小伙伴可以关注博主&#xff0c;博主会继续更新的&#xff0c…...

GPS问题调试—MobileLog中有关GPS关键LOG的释义

GPS问题调试—MobileLog中有关GPS关键LOG的释义 [DESCRIPTION] 在mobile log中,有很多GPS相关的log出现在main log和kernel log、properties文件中,他们的意思是什么,通过这篇文档进行总结,以便在处理GPS 问题时,能够根据这些log快速的收敛问题。 [SOLUTION] 特别先提醒…...

【企业管理】你真的理解向下管理吗?

导读&#xff1a;拜读陈老师一篇文章《不会向下负责&#xff0c;你凭什么做管理者&#xff1f;》&#xff0c;引发不少共鸣&#xff0c;“很多管理者有一种错误的观念&#xff0c;认为管理是向下管理&#xff0c;向上负责。其实应该反过来&#xff0c;是向上管理&#xff0c;向…...

Centos7 硬盘挂载流程

1、添加硬盘到Linux&#xff0c;添加后重启系统2、查看添加的硬盘&#xff0c;lsblksdb 8:16020G 0disk3、分区fdisk /dev/sdbmnw其余默认&#xff0c;直接回车再次查看分区情况&#xff0c;lsblksdb1 8:17 0 20G 0 part4、格式化mkfs -t ext4 /dev/sdb15、挂载mkdir /home/new…...

认识vite_vue3 初始化项目到打包

从0到1创建vite_vue3的项目背景效果vite介绍&#xff08;对比和vuecli的区别&#xff09;使用npm创建vitevitevuie3创建安装antdesignvite自动按需引入&#xff08;vite亮点&#xff09;请求代理proxy打包背景 vue2在使用过程中对象的响应式不好用新增属性的使用$set才能实现效…...

【Go】cron时间格式

【Go】cron时间格式 Minutes&#xff1a;分钟&#xff0c;取值范围[0-59]&#xff0c;支持特殊字符* / , -&#xff1b;Hours&#xff1a;小时&#xff0c;取值范围[0-23]&#xff0c;支持特殊字符* / , -&#xff1b;Day of month&#xff1a;每月的第几天&#xff0c;取值范…...

leetcode 55. 跳跃游戏

给定一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。 数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标。 示例 1&#xff1a; 输入&#xff1a;nums [2,3,1,1,4] 输出&#xff1a;true 解释&#xff1a;可以先跳 1 …...

Linux:文件流指针 与 文件描述符

目录一、文件描述符二、文件流指针三、缓冲区之前讲解过了IO库函数和IO接口&#xff0c;库函数是对系统调用接口的封装&#xff0c;也就是说实际上在库函数内部是通过调用系统调用接口来完成最终功能的。 库函数通过文件流指针操作文件&#xff0c;系统调用接口通过文件描述符操…...

基于FPGA实现正弦插值算法

1、正弦插值的算法分析 1.1 信号在时域与频域的映射关系 在进行正弦算法分析之前&#xff0c;我们回顾一下《数字信号处理》课程中&#xff0c;对于信号在时域与频域之间的映射关系&#xff0c;如下图。 对于上图中的原始信号x(t)&#xff0c;使用ADC对信号进行采样&#xff0…...

JavaWeb_会话技术

文章目录会话跟踪技术的概述Cookie概念Cookie工作流程Cookie基本使用发送Cookie获取CookieCookie原理分析Cookie的使用细节Cookie的存活时间Cookie存储中文SessionSession的基本使用概念工作流程Session的基本使用Session的原理分析Session的使用细节Session的钝化与活化Sessio…...

Reactor响应式流的核心机制——背压机制

响应式流是什么&#xff1f; 响应式流旨在为无阻塞异步流处理提供一个标准。它旨在解决处理元素流的问题——如何将元素流从发布者传递到订阅者&#xff0c;而不需要发布者阻塞&#xff0c;或订阅者有无限制的缓冲区或丢弃。 响应式流模型存在两种基本的实现机制。一种就是传统…...

[数据结构]栈的深入学习-java实现

CSDN的各位uu们你们好,今天千泽带来了栈的深入学习,我们会简单的用代码实现一下栈, 接下来让我们一起进入栈的神奇小世界吧!0.速览文章一、栈的定义1. 栈的概念2. 栈的图解二、栈的模拟实现三.栈的经典使用场景-逆波兰表达式总结一、栈的定义 1. 栈的概念 栈&#xff1a;一种…...

网络编程基础

1 互联网的本质硬件设备有了操作系统&#xff0c;然后装上软件之后我们就能够正常使用了&#xff0c;然后也只能自己使用。像这样&#xff0c;每个人都拥有一台自己的机器&#xff0c;然而彼此孤立。如何才能和大家一起愉快的玩耍&#xff1f;什么是网络&#xff1f;简单来说&a…...

华为OD机试题 - 数列还原(JavaScript)| 机考必刷

更多题库,搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库,搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库,搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解:数列还原题目输入输出示例一输入输出Code代码解析版权说明华为O…...

10-Oracle存储过程(创建,修改,使用及管理)

本章内容 1、我们为什么要用存储过程? 2、存储过程是如何定义和维护的? 3、我们如何调用存储过程? 4、存储过程中常用的复合数据处理方式及CTE 5、存储过程如何进行异常处理? 6、存储过程如何进行事务处理? 7、我们应如何优化存储过程? 1、我们为什么要用存储过程…...

创建线程的三种方法

文章目录1、创建一个类实现Runnable接口&#xff0c;并重写run方法。2、创建一个类继承Thread类&#xff0c;并重写run方法。3、实现Callable接口&#xff0c;重写call()方法&#xff0c;这种方式可以通过FutureTask获取任务执行的返回值。4、run()方法和start()方法有什么区别…...

第一章---Pytorch快速入门---第三节---pytorch中的数据操作和预处理

目录 1.高维数组 1.1 回归数据准备 1.2 分类数据准备 2. 图像数据 1.torchvision.datasets模块导入数据并预处理 2.从文件夹中导入数据并进行预处理 pytorch中torch.utils.data模块包含着一些常用的数据预处理的操作&#xff0c;主要用于数据的读取、切分、准备等。 常用…...

【代码随想录训练营】【Day38】第九章|动态规划|理论基础|509. 斐波那契数|70. 爬楼梯|746. 使用最小花费爬楼梯

理论基础 动态规划与贪心的区别并不是学习动态规划所必须了解的&#xff0c;所以并不重要。 想要了解动态规划算法题的特点&#xff0c;可以直接做下面三道入门简单题练练手感&#xff0c;找找感觉&#xff0c;很快就能体会到动态规划的解题思想。 总结成一句话就是&#xf…...

华为OD机试题 - 快递货车(JavaScript)| 机考必刷

更多题库,搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库,搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库,搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解:快递货车题目输入输出示例一输入输出Code解题思路版权说明华为O…...

LongCat-Image-Editn部署案例:中小企业低成本AI修图方案,替代Photoshop高频操作

LongCat-Image-Editn部署案例&#xff1a;中小企业低成本AI修图方案&#xff0c;替代Photoshop高频操作 重要提示&#xff1a;本文所有操作均在合规合法的网络环境下进行&#xff0c;所有技术方案均符合相关法律法规要求。 1. 引言&#xff1a;中小企业修图痛点与解决方案 对于…...

Qwen3.5-4B-Claude-Opus企业实操:数据治理元数据血缘关系推理补全工具

Qwen3.5-4B-Claude-Opus企业实操&#xff1a;数据治理元数据血缘关系推理补全工具 1. 平台概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是基于Qwen3.5-4B架构的推理蒸馏模型&#xff0c;专门针对企业级数据治理场景中的元数据血缘关系分析任务进行了优化。该模…...

OliveTin高级功能指南:定时任务、文件监控和实体动态更新

OliveTin高级功能指南&#xff1a;定时任务、文件监控和实体动态更新 【免费下载链接】OliveTin OliveTin gives safe and simple access to predefined shell commands from a web interface. 项目地址: https://gitcode.com/gh_mirrors/ol/OliveTin OliveTin是一个强…...

wan2.1-vae中英文双语支持实测:中文提示词准确率92%+英文prompt兼容性验证

wan2.1-vae中英文双语支持实测&#xff1a;中文提示词准确率92%英文prompt兼容性验证 1. 平台核心能力解析 wan2.1-vae是基于Qwen-Image-2512模型的AI图像生成平台&#xff0c;其最大特色在于原生支持中英文双语提示词。在实际测试中&#xff0c;中文提示词的理解准确率达到9…...

IntelliJ IDEA终极教程:从零基础到高效开发的完整指南

IntelliJ IDEA终极教程&#xff1a;从零基础到高效开发的完整指南 【免费下载链接】IntelliJ-IDEA-Tutorial IntelliJ IDEA 简体中文专题教程 项目地址: https://gitcode.com/gh_mirrors/in/IntelliJ-IDEA-Tutorial IntelliJ IDEA 是目前所有 IDE 中最具备沉浸式的 JVM …...

Qwen3-0.6B-FP8效果展示:中英混合输入、长上下文保持、多轮记忆实测

Qwen3-0.6B-FP8效果展示&#xff1a;中英混合输入、长上下文保持、多轮记忆实测 1. 开篇&#xff1a;小模型&#xff0c;大能耐 你可能听过很多关于大语言模型的讨论&#xff0c;动辄几十亿、上百亿参数&#xff0c;部署起来对硬件要求极高。但今天我想跟你聊点不一样的——一…...

OpenClaw数据安全实践:Qwen3-32B+RTX4090D本地化处理敏感财报

OpenClaw数据安全实践&#xff1a;Qwen3-32BRTX4090D本地化处理敏感财报 1. 为什么金融从业者需要本地化AI处理 去年我在帮一家私募基金做季度财报分析时&#xff0c;遇到了一个尴尬场景&#xff1a;当我把客户PDF财报上传到某公有云AI平台提取关键指标后&#xff0c;第二天就…...

终极Windows远程桌面多用户破解指南:让家庭版也能同时登录15人!

终极Windows远程桌面多用户破解指南&#xff1a;让家庭版也能同时登录15人&#xff01; 【免费下载链接】rdpwrap RDP Wrapper Library 项目地址: https://gitcode.com/gh_mirrors/rd/rdpwrap 还在为Windows家庭版只能一个人远程连接而烦恼吗&#xff1f;&#x1f914; …...

GLM-OCR技术解析专栏:在CSDN分享模型优化心得

GLM-OCR技术解析专栏&#xff1a;在CSDN分享模型优化心得 大家好&#xff0c;我是老张&#xff0c;一个在AI和计算机视觉领域摸爬滚打了十来年的工程师。最近几年&#xff0c;OCR&#xff08;光学字符识别&#xff09;技术发展得飞快&#xff0c;从过去只能识别清晰打印体&…...

RWKV7-1.5B-g1a实操手册:基于CSDN GPU平台的完整调用流程

RWKV7-1.5B-g1a实操手册&#xff1a;基于CSDN GPU平台的完整调用流程 1. 模型简介 rwkv7-1.5B-g1a 是基于新一代 RWKV-7 架构的多语言文本生成模型&#xff0c;特别适合中文场景下的轻量级应用。这个1.5B参数的版本在保持较高生成质量的同时&#xff0c;对硬件要求非常友好&am…...