关于Vue的nextTick的一点小理解
官方文档表示:为了在数据变化之后等待Vue完成更新DOM,可以在数据变化之后立即执行Vue.$nextTick(callback)
,这样回调函数就可以在数据变化之后立即执行。
这段话的意思是:
例如:存在
<div id="test">{{ message }}</div> // 假如此时message的值是 hi
当我们对data(){return{}}
中的值进行赋值修改时(例:this.message = 'hello'
),虽然数据变化了,但是其实DOM上的内容并未改变,所以如果此时通过原生js获取这个div的innerHTML时,它的值仍是'hi',而不是赋值修改后的'hello'。
this.message = 'hello';
console.log(this.message); // hello, 数据发生了变化
alert(document.getElementById('test').innerHTML); // hi, DOM还未发生变化
而如果我们在修改了数据之后就想要马上对变化更新后的DOM进行操作,就需要在this.$nextTick(callback)
中调用:
this.message = 'hello';
console.log(this.message); // hello, 数据发生了变化
this.$nextTick(() => {
alert(document.getElementById('test').innerHTML); // hello, DOM已发生变化
})
这个例子可能看起来没什么实际用途,另一个例子:
当我们需要通过某个值(假设: show_login_register
)来对显示的内容(是显示登录框还是注册框)进行判断(v-if,v-else
),并需要获取变化后的内容的clientHeight
来做定位设置,此时,如果我们在show_login_register
的值被赋值改变后就直接获取内容的clientHeight
,此时,内容还是原来的登录框(假设是想要从登录框变成注册框),如果我们想要获取到变化后的内容(注册框的clientHeight
),就需要在this.$nextTick
的回调函数中做操作。
实现原理:
Vue其实是异步执行DOM更新的。
1、只要观察到数据变化,Vue将开启一个队列,并对同一事件循环中发生的所有数据变化做缓冲。
2、如果同一个watcher被多次触发(即一个变量在一次事件循环中被赋值变化了多次),则只会推入队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作非常重要。
3、然后,在下一个的事件循环"tick"中,Vue刷新队列并执行实际(已去重的)工作(即更新DOM)。
Vue在内部尝试对异步队列使用原生的Promise.then
和MutationObserver
(这个是html 5新加的一个功能,其功能是监听dom节点的变动,在所有dom变动完成后,执行回调函数),如果执行环境不支持,会采用setTimeout(fn,0)
代替。
关于Vue的nextTick的一点小理解的更多相关文章
- net core体系-web应用程序-4net core2.0大白话带你入门-8asp.net core 内置DI容器(DependencyInjection,控制翻转)的一点小理解
asp.net core 内置DI容器的一点小理解 DI容器本质上是一个工厂,负责提供向它请求的类型的实例. .net core内置了一个轻量级的DI容器,方便开发人员面向接口编程和依赖倒置(IO ...
- Layui的一点小理解(上)
首先声明这是个人的一点理解,如有不对之处请指正,以下的例子有在官网上看到的,有的是自己写的.还是老规矩最后会附上官网的,如有不明白之处,请查看文档或留言. 既然说Layui,当然要简单的介绍以下什么是 ...
- params数据来源和参数传递的一点小理解
今天是星期一,上次说的两个需求,解决了一个.在原来的页面增加了一个可以勾选的单选框用于完成,勾选对应的条件来渲染对应的页面,使用了简单的单选框radio_button来实现单选的提交,使用条件判断语句 ...
- asp.net core 内置DI容器的一点小理解
DI容器本质上是一个工厂,负责提供向它请求的类型的实例. .net core内置了一个轻量级的DI容器,方便开发人员面向接口编程和依赖倒置(IOC). 具体体现为Micorosoft.Extensio ...
- 关于@Mapper和@Repository的一点小理解
参考博客:https://blog.csdn.net/lalioCAT/article/details/51803461 如果在接口上@Mapper,然后再在 xml中的namespace指向mapp ...
- Redis分布式锁的一点小理解
1.在分布式系统中,我们使用锁机制只能保证同一个JVM中一次只有一个线程访问,但是在分布式的系统中锁就不起作用了,这时候就要用到分布式锁(有多种,这里指 redis) 2.在 redis当中可以使用命 ...
- 基于源码分析Vue的nextTick
摘要:本文通过结合官方文档.源码和其他文章整理后,对Vue的nextTick做深入解析.理解本文最好有浏览器事件循环的基础,建议先阅读上文<事件循环Event loop到底是什么>. 一. ...
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
- 关于win8开发的一点小总结
我今天做画面的时候,发现了一点小问题. 我在xmal文件里面加了一个CheckBox控件,设置IsChecked属性为True,并添加了Checked事件.Checked事件里面有对另外一个TextB ...
随机推荐
- jstl 中无法使用EL语句。异常信息:According to TLD or attribute directive in tag file, attribute value does not accept any expressions
JSTL 标签库的有两种 taglib 伪指令, 其中 RT 库即是依赖于 JSP 传统的请求时属性值, 而不是依赖于 EL 来实现: 只要将 <%@ taglib uri="http ...
- PostgreSQL可视化客户端工具
TreeSoft数据库管理系统使用JAVA开发,采用稳定通用的springMVC +JDBC架构,实现基于WEB方式对 MySQL,Oracle,PostgreSQL,MSSQL, Hive, SAP ...
- Java - "JUC" Semaphore源码分析
Java多线程系列--“JUC锁”11之 Semaphore信号量的原理和示例 Semaphore简介 Semaphore是一个计数信号量,它的本质是一个"共享锁". 信号量维护了 ...
- hadoop学习之hdfs文件系统
一.hdfs的概念 Hadoop 实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS. Hadoop是Apache Lucene创始人Doug Cu ...
- jQuery的$.getScript方法去加载javaScript文档解析
1.两个文件的代码如下: <script> function Ajax(){ //将9-4.html中的Ajax()函数进行修改 $.getScript('9-8.js',function ...
- 关于python操作带有中文文件名报错的解决办法
python代码的编码格式 #coding:utf-8 在操作文件时,如果文件名带有中文,则需要将文件路径以Unicode的编码格式进行操作 具体的方式如下 path = "你的 ...
- Geolocation API
Geolocation API--地理定位 navigator.geolocation getCurrentPosition() 触发请求用户共享地理定位信息的对话框 接收3个参数: 1.成功回调函数 ...
- Linux打包、压缩与解压详解
介绍:在Windows下最常见的压缩文件就只有两种,另一个是.rar,它有.gz..tar.gz.tgz.bz2..Z..tar等众多的压缩文件名,本文就来对这些常见的压缩文件进行总结,在具体总结各类 ...
- Java 社区平台 - Sym 1.7.0 发布
English | 中文 简介 Symphony([ˈsɪmfəni],n.交响乐)是一个现代化的社区平台,因为它: 实现了面向内容讨论的论坛 包含了面向用户分享.交友.游戏的社交网络 集成了聚合独立 ...
- PDO预处理语句
1.造PDO对象$dsn = "mysql:dbname=mydb;host=localhost";$pdo = new PDO($dsn,"root",&qu ...