【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代理是一种加密代理技术,其工作原理主要包括以下几个关键步骤: 代理服务器接收客户端请求;客户端与代理服务器之间建立加密连接;代理服务器将客户端的请求转发…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
HTML 列表、表格、表单
1 列表标签 作用:布局内容排列整齐的区域 列表分类:无序列表、有序列表、定义列表。 例如: 1.1 无序列表 标签:ul 嵌套 li,ul是无序列表,li是列表条目。 注意事项: ul 标签里面只能包裹 li…...
Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)
参考官方文档:https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java(供 Kotlin 使用) 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
九天毕昇深度学习平台 | 如何安装库?
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子: 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?
现有的 Redis 分布式锁库(如 Redisson)相比于开发者自己基于 Redis 命令(如 SETNX, EXPIRE, DEL)手动实现分布式锁,提供了巨大的便利性和健壮性。主要体现在以下几个方面: 原子性保证 (Atomicity)ÿ…...
如何应对敏捷转型中的团队阻力
应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中,明确沟通敏捷转型目的尤为关键,团队成员只有清晰理解转型背后的原因和利益,才能降低对变化的…...
