如何理解nextTick函数
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下,面试也经常问,所以在这里总结一下。
场景
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。
语法
Vue.nextTick( [callback, context] )
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {// DOM 更新了
})// 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示)
Vue.nextTick().then(function () {// DOM 更新了})
异步更新队列
可能你还没有注意到,Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then
、MutationObserver
和 setImmediate
,如果执行环境不支持,则会采用 setTimeout(fn, 0)
代替。
例如,当你设置 vm.someData = 'new value'
,该组件不会立即重新渲染。当刷新队列时,组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程,但是如果你想基于更新后的 DOM 状态来做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)
。这样回调函数将在 DOM 更新完成后被调用。
例如:
<div id="example">{{message}}</div>var vm = new Vue({el: '#example',data: {message: '123'}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {vm.$el.textContent === 'new message' // true
})
在组件内使用 vm.$nextTick()
实例方法特别方便,因为它不需要全局 Vue,并且回调函数中的 this 将自动绑定到当前的 Vue 实例上
Vue.component('example', {template: '<span>{{ message }}</span>',data: function () {return {message: '未更新'}},methods: {updateMessage: function () {this.message = '已更新'console.log(this.$el.textContent) // => '未更新'this.$nextTick(function () {console.log(this.$el.textContent) // => '已更新'})}}
})
因为 $nextTick() 返回一个 Promise 对象,所以你可以使用新的 ES2017 async/await 语法完成相同的事情:
methods: {updateMessage: async function () {this.message = '已更新'console.log(this.$el.textContent) // => '未更新'await this.$nextTick()console.log(this.$el.textContent) // => '已更新'}
}
如何理解nextTick函数相关推荐
- javascript之异步操作理解---回调函数,async,await以及promise对象
javascript之异步操作理解---回调函数,async,await以及promise对象 概述 概述 写在前面:虽然平时做项目,但是发现自己写的代码还是很烂.最近接触了一个对性能要求比较高的项目 ...
- 深入理解javascript函数系列第二篇——函数参数
前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,甚至可以不传参数.本文是深入理解javascript函数 ...
- C++深入理解虚函数
c++深入理解虚函数 虚函数的使用方法: (1)在基类用virtual声明成员函数为虚函数.这样就可以在派生类中重新定义此函数,为它赋予新的功能,并能方便被调用. 在类外定义虚函数时,不必在定义vir ...
- 【Python】深入理解Python函数的9个黄金法则
编程离不开函数.Python的函数除了具备传统意义上的函数特征外,又被赋予了其他一些特性,让它更灵活.更强大.这篇文章结合之前我推荐的一本Python宝书,又添加一些我的实践和理解,总结了深入理解Py ...
- python函数可以作为容器对象吗_正确理解Python函数是第一类对象
正确理解 Python函数,能够帮助我们更好地理解 Python 装饰器.匿名函数(lambda).函数式编程等高阶技术. 函数(Function)作为程序语言中不可或缺的一部分,太稀松平常了.但函数 ...
- 正确理解Python函数是第一类对象
正确理解 Python函数,能够帮助我们更好地理解 Python 装饰器.匿名函数(lambda).函数式编程等高阶技术. 函数(Function)作为程序语言中不可或缺的一部分,太稀松平常了.但函数 ...
- 用实际例子理解回调函数(Calback)
用实际例子理解回调函数(Calback) 在我们编码的过程中,调用和回调几乎无处不在,但是我对回调函数到底是怎样一回事并没有一个真正透彻的理解,最近我查找学习了一些资料,学到了很多. 我参考了一些知乎 ...
- 【C语言】函数的理解——关于函数的声明
函数的理解--关于函数的声明 #include <stdio.h> //void sumx(int begin,int end);//函数的声明 void sumx(int ,int ) ...
- 阅读并理解lv_demo_widgets()函数
阅读并理解lv_demo_widgets()函数 现在我就是一个小白,我们用左键点进去这个函数lv_demo_widgets(),在LVGL.Simulator.cpp文件107行中.当前任务就是理解 ...
最新文章
- linux ssh 远程登陆 报错 software caused connection abort 解决方法
- 使用个性化Profile代替Session
- 【软件工程】关于计算机的一些问答与思考
- 分析工作试用期收获_免费使用零编码技能探索数据分析
- 【VS开发】static、extern分析总结
- 双向链表的C++类模板实现
- ad网络标号设置经验_PLC模拟量通道设置的平均次数是什么意思?如何确定?
- VS2015如何使自己的exe文件在别人的电脑上运行(找不到MSVCP140D.dll)
- 基于最大正向匹配算法的中文分词
- tar压缩及解压命令
- http请求 405错误
- HDU - 6287 口算训练 (二分+思维)
- 科研为什么需要甘特图
- Python爬虫:搜狗(微信,知乎)公众号内容
- FTL介绍 -- FTL映射
- Python爬取拉钩招聘网,告诉你:这类程序员最赚钱!
- 没有学历没有工作经验的程序员怎么找工作
- sincerit 王者荣耀(01背包)
- 帆软报表——多源分片与冻结
- JY02调试-无刷电机驱动芯片
热门文章
- 苹果回应iPhone12用5G耗电快;央行:微信支付宝和数字人民币不存在竞争关系;Win10X 将于年底签署 RTM|极客头条
- 九大操作系统掌门人齐聚岳麓,六代技术人跨代对话,共同见证技术大时代
- 太秀了!单片机内置 ADC 实现高分辨率采样?
- 卷积神经网络的前世今生
- 如何快速写一款小而美的“上滑无限加载的控件”?| 博文精选
- 远程办公、游戏迅猛增长,旅行、汽车业遭重创!疫期移动互联网行业报告解读...
- 科技战疫丨SENSORO灵思智能安全服务助力疫情防控
- 余承东硬刚 iPhone11;苹果推送正式版 iOS 13;php-nsq 3.4.3 线上稳定版发布 | 极客头条...
- “数”有专攻、智“汇”武汉,周末技术沙龙Call你来!
- 华为效仿苹果卖高价手机?滴滴顺风车开放灰度测试;苹果官微被投诉“攻陷”| 极客头条...