【vue】vue面试高频问题之-$nextTick的作用和使用场景
nextTick的作用和使用场景
vue中的nextTick主要用于处理数据动态变化后,DOM还未及时更新的问题,用nextTick就可以获取数据更新后最新DOM的变化
api文档
Vue.nextTick( [callback, context] )
参数:
{Function} [callback]{Object} [context]用法:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
// 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.nextTick(function () {// DOM 更新了 })// 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示) Vue.nextTick().then(function () {// DOM 更新了})2.1.0 起新增:如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不原生支持 Promise (IE:你们都看我干嘛),你得自己提供 polyfill。
参考:异步更新队列
适用场景:
第一种:有时需要根据数据动态的为页面某些dom元素添加事件,这就要求在dom元素渲染完毕时去设置,但是created与mounted函数执行时一般dom并没有渲染完毕,所以就会出现获取不到,添加不了事件的问题,这回就要用到nextTick处理
第二种:在使用某个第三方插件时 ,希望在vue生成的某些dom动态发生变化时重新应用该插件,也会用到该方法,这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法,例如:应用滚动插件better-scroll时
第三种:数据改变后获取焦点
何为$nextTick
因为Vue的异步更新队列,$nextTick是用来知道什么时候DOM更新完成的。
详细解读:
我们先来看这样一个场景:有一个div,默认用 v-if 将它隐藏,点击一个按钮后,改变 v-if 的值,让它显示出来,同时拿到这个div的文本内容。如果v-if的值是 false,直接去获取div内容是获取不到的,因为此时div还没有被创建出来,那么应该在点击按钮后,改变v-if的值为 true,div才会被创建,此时再去获取,示例代码如下:
<div id="app"><div id="div" v-if="showDiv">这是一段文本</div><button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({el : "#app",data:{showDiv : false},methods:{getText:function(){this.showDiv = true;var text = document.getElementById('div').innnerHTML;console.log(text);}}
})
</script>
这段代码并不难理解,但是运行后在控制台会抛出一个错误:Cannot read property 'innnerHTML of null,意思就是获取不到div元素。这里就涉及Vue一个重要的概念:异步更新队列。
异步更新队列
Vue在观察到数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一个事件循环中发生的所以数据改变。在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作。然后,在下一个事件循环tick中,Vue刷新队列并执行实际(已去重的)工作。所以如果你用一个for循环来动态改变数据100次,其实它只会应用最后一次改变,如果没有这种机制,DOM就要重绘100次,这固然是一个很大的开销。
Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver,如果都不支持,就会采用setTimeout代替。
知道了Vue异步更新DOM的原理,上面示例的报错也就不难理解了。事实上,在执行this.showDiv = true时,div仍然还是没有被创建出来,直到下一个vue事件循环时,才开始创建。$nextTick就是用来知道什么时候DOM更新完成的,所以上面的示例代码需要修改为:
<div id="app">
<div id="div" v-if="showDiv">这是一段文本</div><button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({el : "#app",data:{showDiv : false},methods:{getText:function(){this.showDiv = true;this.$nextTick(function(){var text = document.getElementById('div').innnerHTML;console.log(text); });}}
})
</script>
这时再点击事件,控制台就打印出div的内容“这是一段文本“了。
理论上,我们应该不用去主动操作DOM,因为Vue的核心思想就是数据驱动DOM,但在很多业务里,我们避免不了会使用一些第三方库,比如 popper.js、swiper等,这些基于原生javascript的库都有创建和更新及销毁的完整生命周期,与Vue配合使用时,就要利用好$nextTick。
相关文章:
【vue】vue面试高频问题之-$nextTick的作用和使用场景
nextTick的作用和使用场景 vue中的nextTick主要用于处理数据动态变化后,DOM还未及时更新的问题,用nextTick就可以获取数据更新后最新DOM的变化 api文档 Vue.nextTick( [callback, context] ) 参数: {Function} [callback]{Object} [context]…...
MySQL学习笔记之SQL语句执行过程查看
文章目录 参数使能查看最近一条SQL执行过程查看profiling打开开后,所有SQL语句执行耗时查看某一条SQL的执行过程指定要查看的性能选项查看所有性能选项 参数使能 以select语句为例,首先打开profile参数: mysql> set profiling 1; Query…...
如何以毫秒精度,查看系统时间以及文件的创建时间
用 cmd 查看系统的时间: powershell -command "(Get-Date -UFormat %Y-%m-%d %H:%M:%S).toString() . ((Get-Date).millisecond)" 用 XYplorer 查看文件的精确创建时间(含30天试用): XYplorer - File Manager for …...
基于机器学习的情绪识别算法matlab仿真,对比SVM,LDA以及决策树
目录 1.算法理论概述 2.部分核心程序 3.算法运行软件版本 4.算法运行效果图预览 5.算法完整程序工程 1.算法理论概述 情绪识别是一种重要的情感分析任务,旨在从文本、语音或图像等数据中识别出人的情绪状态,如高兴、悲伤、愤怒等。本文介绍一种基于…...
jMeter使用随记
参数化BodyData 先制作参数文件 再设置一个csv data set config 最后在body data里面写上参数${xxxxx}...
[语义分割] DeepLab v3(Cascaded model、ASPP model、两种ASPP对比、Multi-grid、训练细节)
Rethinking Atrous Convolution for Semantic Image Segmentation 论文地址:Rethinking Atrous Convolution for Semantic Image SegmentationPytorch 实现代码:pytorch_segmentation/deeplab_v3 这是一篇 2017 年发表在CVPR上的文章。相比 DeepLab V2 有…...
css - Media Query
使用bootstrap的grid system可以在一个较为粗糙的范围得到较好的响应性,但是通过viewport可以看到网站在具体哪个像素点处变得丑陋,再通过css media query来精细调整网页布局。 可以通过media query来提高网页移动响应能力。...
9.python设计模式【外观模式】
内容:为子系统中的一组接口提供一个一致的界面,外观模式定义了一个高层接口,这个接口使得这一个子系统更加容易使用。 角色: 外观(facade)子类系统(subsystem classes) UML图 举…...
Webpack5 CopyPlugin的作用
在Webpack 5中,CopyPlugin是一个插件,用于将文件或目录从源位置复制到构建目录中。它的作用是帮助开发人员在构建过程中将静态文件(如图片、字体等)直接复制到输出目录,而无需经过任何处理。 CopyPlugin并不是必须的&…...
kafka服务端允许生产者发送最大消息体大小
1、kafka config服务端配置文件server.properties server.properties中加上的message.max.bytes配置,我目前设置为5242880,即5MB,可以根据实际情况增大。 message.max.bytes5242880 在生产者端配置max.request.size,这是单个消息…...
台阶型Nim游戏博弈论
台阶型Nim游戏 题目 https://www.acwing.com/problem/content/894/ 现在,有一个 n n n 级台阶的楼梯,每级台阶上都有若干个石子,其中第 i i i 级台阶上有 a i a_i ai 个石子( i ≥ 1 i \ge 1 i≥1)。 两位玩家轮流操作,每…...
NestJS 的 中间件 学习
基本概念 中间件是在路由处理程序之前调用的函数。中间件函数可以访问请求和响应对象。在程序中我们可以让多个中间件串起来一起使用,当多个中间件一起使用时我们可以使用next()调用下一个中间件。 中间件主要是可以实现如下功能: 执行任何代码更改请…...
搭建自己第一个golang程序
概念: golang 和 java有些类似,配置好环境就可以直接编写运行了;这里分两种: 一.shell模式 创建一个go类型的文件 往里面编写代码 二.开发工具模式 这里的开发工具 我选用goland package mainimport "fmt"func mai…...
Mysql加锁过程
1、背景 MySQL/InnoDB的加锁分析,一直是一个比较困难的话题。我在工作过程中,经常会有同事咨询这方面的问题。同时,微博上也经常会收到MySQL锁相关的私信,让我帮助解决一些死锁的问题。本文,准备就MySQL/InnoDB的加锁问…...
财经界杂志财经界杂志社财经界编辑部2023年第19期目录
《财经界》投稿邮箱:cnqikantg126.com(注明投稿“《财经界》”) ●崔编辑Q Q :695548262 微信号:f99832970 名刊名著_国内外名刊名著 财经名刊名著 李少鹏 ;王海蕴; 6-7 发改委专线 六方面发力 看中国经济形势,既要看准当…...
Linux常用命令——dpkg-split命令
在线Linux命令查询工具 dpkg-split Debian Linux中将大软件包分割成小包 补充说明 dpkg-split命令用来将Debian Linux中的大软件包分割成小软件包,它还能够将已分割的文件进行合并。 语法 dpkg-split(选项)(参数)选项 -S:设置分割后的每个小文件最…...
常见的二十种软件测试方法详解
一.单元测试(模块测试) 单元测试是对软件组成单元进行测试。其目的是检验软件组成单位的正确性。测试对象是:模块。 对模块进行测试,单独的一个模块测试,属于静态测试的一类 测试阶段:编码后或者编码前&…...
Python(一)
要做到坚韧不拔,最要紧的是坚持到底。——陀思妥耶夫斯基 2023 6 14~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --根据你自己的操作系统下载对应的。 -- pyhton 文档 --交互方式 使用的工具 --如何启动工具 -- 交互式方式一般在数据分析中…...
git pull无效,显示 * branch master -> FETCH_HEADAlready up to date. pull无效解决方法
报错情况 本地文件夹中删除文件后,git pull无效。显示如下: **** MINGW64 ~/****/haha (master) $ git pull origin master From https://gitee.com/****/haha* branch master -> FETCH_HEAD Already up to date.解决 方法一 命令…...
SK5代理与socks5代理
第一部分:SK5代理与socks5代理的原理与功能 SK5代理 SK5代理是一种加密代理技术,其工作原理主要包括以下几个关键步骤: 代理服务器接收客户端请求;客户端与代理服务器之间建立加密连接;代理服务器将客户端的请求转发…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣(LeetCode) 思路: 笔者写过很多次这道题了,不想写题解了,大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...
嵌入式学习笔记DAY33(网络编程——TCP)
一、网络架构 C/S (client/server 客户端/服务器):由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序,负责提供用户界面和交互逻辑 ,接收用户输入,向服务器发送请求,并展示服务…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
解读《网络安全法》最新修订,把握网络安全新趋势
《网络安全法》自2017年施行以来,在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂,网络攻击、数据泄露等事件频发,现行法律已难以完全适应新的风险挑战。 2025年3月28日,国家网信办会同相关部门起草了《网络安全…...
