$nextTick有什么作用?

文章目录

    • $nextTick有什么作用?
      • 一、NextTick是什么
      • 二、为什么要有`nextTick`?

$nextTick有什么作用?

一、NextTick是什么

官方对其的定义

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM

什么意思呢?

我们可以理解成,Vue 在更新 DOM 时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新

场景1:

<p ref="continer">{{ msg }}</p>
<button @click="change()">改变</button>
data() {
    return {
      msg: '你好'
    }
  },
  methods: {
    change() {
      this.msg += '呀'
      console.log(this.$refs.continer.innerText)
      // 解决方法
      //   this.$nextTick(() => {
      //     console.log(this.$refs.continer.innerText)
      //   })
    }
  },

这时候想获取页面最新的DOM节点,却发现获取到的是旧值

console.log(this.$refs.continer.innerText) // 你好

因为,点击事件触发后,vue会把对应方法内的任务执行完以后,再进行页面渲染,所以,拿到的是老的值。

场景2:

	<p v-if="!isEdit">姓名:{{ name }}</p>
    <p v-if="isEdit">姓名: <input type="text" ref="ipt" v-model="name" /></p>
    <br />
    <button @click="change">编辑</button>
data() {
    return {
      name: 'test',
      isEdit: false
    }
  },
  methods: {
    change() {
      this.isEdit = true
      
      // 此时,我想直接获取焦点,行不通
      //因为Dom还没更新的时候就已经执行了这行代码,所以获取不到焦点
      // this.$refs.ipt.focus()
           
      this.$nextTick(() => {
        this.$refs.ipt.focus()
      })
    }
  },

二、为什么要有nextTick

举个例子

{{num}}
for(let i=0; i<100000; i++){
    num = i
}

如果没有 nextTick 更新机制,那么 num 每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图),有了nextTick机制,只需要更新一次,所以nextTick本质是一种优化策略

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

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

相关文章

prometheus 原理(架构,promql表达式,描点原理)

大家好&#xff0c;我是蓝胖子&#xff0c;提到监控指标&#xff0c;不得不说prometheus&#xff0c;今天这篇文章我会对prometheus 的架构设计&#xff0c;promql表达式原理和监控图表的绘图原理进行详细的解释。来让大家对prometheus的理解更加深刻。 架构设计 先来看看&am…

Vue3全家桶 - Vue3 - 【4】侦听器

侦听器 一、 组合式API&#xff1a; 1.1 watch()函数 创建侦听器: 语法:// 先导入 watch 函数 import { watch } from vue watch(source, callback, options)source&#xff1a; 需要侦听的数据源&#xff0c;可以是 ref&#xff08;包括计算属性&#xff09;、一个响应式对…

从监控到稳定性可观测:从问题响应到预防的技术变革

从单体架构到集群架构再到微服务架构&#xff0c;业务越来越庞大&#xff0c;也越来越复杂。每一次架构的升级&#xff0c;在提升了业务吞吐量的同时&#xff0c;必然会带来更大的复杂度。云原生时代背景下&#xff0c;微服务、Service Mesh、 Serverless 等新技术的出现&#…

sql面试题21:营销带货销量分析

题目大概意思&#xff1a; 找出网红带来的订单号和销售额&#xff08;销售额是该订单的&#xff0c;比如凑单&#xff09;&#xff0c;满足是优惠码是1的&#xff0c;B类商品 数据表两个&#xff0c;分别是订单和品类 CREATE TABLE 订单 (订单号 VARCHAR(512),商品号 VARCH…

LED线性恒流控制芯片两段/三段开关调光/调色:SM2223E

LED线性恒流控制芯片的开关调光/调色功能可以通过以下两种方式实现&#xff1a; LED线性恒流控制芯片的开关调光/调色功能 1. 两段调光/调色&#xff1a;通过开启或关闭电源开关&#xff0c;可以调节LED灯的亮度或色温&#xff0c;从而改变输出电流的大小。这种方式适用于需要…

Redis及其数据类型和常用命令(一)

Redis 非关系型数据库&#xff0c;不需要使用sql语句对数据库进行操作&#xff0c;而是使用命令进行操作&#xff0c;在数据库存储时使用键值对进行存储&#xff0c;应用场景广泛&#xff0c;一般存储访问频率较高的数据。 一般关系型数据库&#xff08;使用sql语句进行操作的…

ChatGPT引领智能对话:微信小程序的新潮玩法

1.引言 ChatGPT是由OpenAI开发的基于深度学习的自然语言处理模型&#xff0c;它在人工智能领域具有重要的影响力。ChatGPT基于大规模的文本数据进行训练&#xff0c;能够生成高质量的自然语言文本&#xff0c;包括对话、文章等。它的影响力主要体现在以下几个方面&#xff1a;…

系统及其分类

系统定义 系统&#xff1a;指若干相互关联的事物组合而成的具有特定功能的整体。 系统的基本作用&#xff1a;对输入信号进行加工和处理&#xff0c;将其转换为所需要的输出信号。 系统分类 系统的分类错综复杂&#xff0c;主要考虑其数学模型的差异来划分不同类型。主要分为…

【HarmonyOS】鸿蒙开发之工具安装与工程项目简介——第1章

鸿蒙开发工具包下载与使用 鸿蒙开发工具包下载 下载deveco studio开发工具包 系统要求: Windows 操作系统&#xff1a;Windows 10/11 64 位 内存&#xff1a;8GB 及以上 硬盘&#xff1a;100GB 及以上 分辨率&#xff1a;1280*800 像素及以上macOS 操作系统&#xff1a;mac…

leetcode代码记录(有序数组两数之和

目录 1. 题目&#xff1a;2. 我的代码&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 给定一个已按照 升序排列 的整数数组 numbers &#xff0c;请你从数组中找出两个数满足相加之和等于目标数 target 。 函数应该以长度为 2 的整数数组的形式返回这两个数的下标值。numb…

【办公类-22-13】周计划系列(5-5)“周计划-05 上传周计划png“ (2024年调整版本)

作品展示——将docx 转PDF转png&#xff0c;保留第一张图片 背景需求&#xff1a; 把周计划内容初步替换后&#xff0c;获得了19周的周计划教案的docx 需要把周计划第一页的反思内容删除&#xff0c;&#xff0c;然后把第一页横版截图上传班级主页。 需求&#xff1a;周计划do…

开机一直提示dll文件缺失的修复方法,轻松解决弹窗dll问题

当我们在启动计算机并进入操作系统的过程中&#xff0c;如果遇到了开机即刻弹出窗口提示“dll文件缺失”的情况&#xff0c;这究竟是怎么一回事呢&#xff1f;首先&#xff0c;我们需要理解“dll”是Dynamic Link Library&#xff08;动态链接库&#xff09;的缩写&#xff0c;…

智海Mo 平台与 Datawhale 携手浙江大学,共襄 AI+X 高校行!

2024年3月9日&#xff0c;一场以"AIX 高校行"为主题的活动在浙江大学成功举办。本次活动由 Datawhale 与杭州市人工智能学会主办&#xff0c;浙江大学人工智能研究所、浙江大学控制科学与工程学院联合主办&#xff0c;浙江大学学生人工智能协会承办&#xff0c;趋动云…

49、东北大学、阿尔伯塔大学:MVS-GCN多视角脑区、具有先验脑结构学习的图模型[GCN六元理论识别所有EEG!]

本文由东北大学医学图像智能计算教育部重点实验室&#xff0c;加拿大阿尔伯塔大学于2022年1.19日发表于<Computers in Biology and Medicine> JCR\IF: Q1\7.7 Abstract&#xff1a; 目的:近年来&#xff0c;脑功能网络(FBN)已被用于神经系统疾病的分类&#xff0c;如自…

【nvm】下载安装,管理 node

nvm管理node 一. 阐述二. 需求三. nvm3.1 下载3.2 安装3.3 验证是否安装成功 四. 重启电脑五. 管理成功六. 报错6.1 nvm安装后node无效&#xff08;nvm入手&#xff0c;解决nvm use 不成功问题&#xff09;6.2 安装nvm后node无效&#xff08;node版本入手&#xff0c;直接替换更…

Kubeadm部署K8s

Kubeadm部署K8s 集群规划&#xff1a; Master节点规划: Node节点规划: 安装要求 在开始之前&#xff0c;部署Kubernetes集群机器需要满足以下几个条件&#xff1a; 操作系统 CentOS7.x-86_x64 硬件配置&#xff1a;2GB或更多RAM&#xff0c;2个CPU或更多CPU&#xff0c;硬盘…

Capture One 23:光影魔术师,细节掌控者mac/win版

Capture One 23&#xff0c;不仅仅是一款摄影后期处理软件&#xff0c;它更是摄影师们的得力助手和创意伙伴。这款软件凭借其卓越的性能、丰富的功能和前沿的技术&#xff0c;为摄影师们带来了前所未有的影像处理体验。 Capture One 23 软件获取 Capture One 23以其强大的色彩…

rt-thread组件之audio组件(结合wavplayer包使用)

前言 继上一篇RT-Thread组件之Audio框架i2s驱动的编写&#xff0c;应用层使用rt-thread软件包里面的wavplayer组件使用过程中wavplayer版本和rt-thread 5.0版本出现一个小的版本不兼容问题,这里做个记录 wavplayer软件包 问题出现的地方 源码应该修改为 版本对比

【消息队列开发】 背景知识与需求分析

文章目录 &#x1f343;前言&#x1f332;消息队列背景知识&#x1f333;需求分析&#x1f6a9;核心概念&#x1f6a9;核心API&#x1f6a9;交换机类型(Exchange Type)&#x1f6a9;持久化&#x1f6a9;网络通信&#x1f6a9;消息应答&#x1f6a9;模块划分 ⭕总结 &#x1f34…

2024VLN综述(1)

1 INTRODUCTION 视觉语言导航(VLN)[12-14]作为体现智能领域的一个重要研究方向,融合了人工智能、自然语言处理、计算机视觉和机器人技术。其目的是通过理解自然语言指令和解释视觉信息,使代理能够在虚拟和真实环境中导航[15-17]。这种方法不仅为更自然、更高效的人机交互铺…