Vue $nextTick
1、概述
Vue在观察到数据变化时并不是立即更新DOM,而是开启一个队列,并缓冲在同一个事件循环中发生所有数据的改变。
在缓冲时会去除重复的数据,从而避免不必要的计算和DOM操作。
在下一个事件循环的tick中,Vue刷新队列并执行实际(已去重)的工作。
Vue是异步更新DOM(异步更新队列)。
$nextTick就是知道什么时候DOM更新完成的。
2、示例代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
</head>
<body>
<div id="app">
<div id="div" v-if="showDiv">
这是一段文本
</div>
<button @click="getText()">获取div的内容</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
showDiv: false
},
methods: {
getText: function() {
this.showDiv = true;
this.$nextTick(function() {
var text = document.getElementById('div').innerHTML;
console.log(text)
});
}
}
})
</script>
</body>
</html>
更多专业前端知识,请上 【猿2048】www.mk2048.com
Vue $nextTick相关推荐
- 双十一,打包半价理解Vue的nextTick与watcher以及Dep的蓝色生死恋?
Vue之nextTick理解 前言 一开始就只想搞清楚nextTick的一个原理,谁知道,跟吃了辣条一下,停不下来,从nextTick的源码到Watcher源码再到Dep源码,震惊,然后再结合自己之前 ...
- 前端面试题--vue
文章目录 1. vue 生命周期 2. VUE 中 computed 和 watch 的区别是什么? 3. 动态绑定 类名和样式 4. v-if 与 v-show 的区别 5. v-for 列表渲染 ...
- dom vue 加载完 执行_前端面试题——Vue
前言 前几天整理了一些 html + css + JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articl ...
- 前端碎碎念 之 nextTick, setTimeout 以及 setImmediate 三者的执行顺序
『前端碎碎念』系列会记录我平时看书或者看文章遇到的问题,一般都是比较基础但是容易遗忘的知识点,你也可能会在面试中碰到. 我会查阅一些资料并可能加上自己的理解,来记录这些问题.更多文章请前往我的个人博客 ...
- vue 之 nextTick 与$nextTick
VUE中Vue.nextTick()和this.$nextTick()怎么使用? 官方文档是这样解释的: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 D ...
- Linux事件循环阻塞,深入浅析Node.js 事件循环、定时器和process.nextTick()
什么是事件循环 尽管JavaScript是单线程的,但通过尽可能将操作放到系统内核执行,事件循环允许Node.js执行非阻塞I/O操作. 由于现代大多数内核都是多线程的,因此它们可以处理在后台执行的多 ...
- vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用
vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用 参考文章: (1)vue的$nextTi ...
- js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)...
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...
- Vue.nextTick()理解
什么是Vue.nextTick() 官方解释:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 注意:重点是获取更新后的DOM 就是在开发过程中有个 ...
- echarts 样式 配置 vue
vue使用实例 <template> <div style="width:100%;height:100%;" id="productStruc ...
最新文章
- 银行启动开放战略,能否赢回金融科技下半场?
- vue.js仿饿了么app---webpack配置项
- typedef VS #define —— C语言中的 关键字 与 C指令
- Linux下Bond技术怎样实现负载均衡的步骤
- mysql 浏览器可视窗口_浏览器窗口的可视区域大小指的是哪里?
- memcache调整value大小限制
- 计算机操作系统》第06章在线测试,《计算机操作系统》第01章在线测试
- matlab误码率分析,误码率分析 请大神帮忙解释下程序
- SSL-ZYC 2402 世界语
- SSH2开发简易的购物网站源代码下载
- 1. 通用基础算法(1.1枚举算法/1.2递推算法/1.3递归算法)
- 读书百客:《渔家傲·天接云涛连晓雾》评赏
- 字符数组与字符串 统计空格个数
- css 彩虹色渐变色,纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)...
- Mybatis 批量更新运行异常,数据库 postgres
- 练习绕口令快速提高语言表达能力(收藏)
- 百度云重置服务器密码,单台或多台腾讯云服务器 CVM 重置实例密码教程
- 电机matlab程序计算公式,MATLAB用于电机电磁计算的计算机编程
- 如何查看 lib 文件
- 前端和后端分别做什么?
热门文章
- oracle today函数,oracle日期函数集锦
- 如何获取当前刀具号_数控刀具的选用原则,如何使用数控刀具?一文全面介绍数控刀具...
- 二,八,十,十六进制之间转换的相应方法
- react.js从入门到精通(一)
- 转帖 IBM要推POWER9,来了解一下POWER处理器的前世今生
- vmware中centos6.4突然无法进入图形界面解决方法
- [POJ2151]Check the difficulty of problems(概率DP)
- ArcMap 导入Excel坐标数据
- 推荐文章:机器学习:“一文读懂机器学习,大数据/自然语言处理/算法全有了...
- Sublime text 2下alignment插件无效的解决办法