什么时候需要用的Vue.nextTick()
2024-08-23 02:26:19
什么时候需要用的Vue.nextTick()
你在Vue生命周期的
created()
钩子函数进行的DOM操作一定要放在Vue.nextTick()
的回调函数中。原因是什么呢,原因是在created()
钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()
的回调函数中。与之对应的就是mounted
钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。在数据变化后要执行的
某个操作
,而这个操作
需要使用随数据改变而改变的DOM结构的时候,这个操作
都应该放进Vue.nextTick()
的回调函数中。
原因是,Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。
当你设置 vm.someData = 'new value',DOM 并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情,就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
实例:
<ul id="demo">
<li v-for="item in list">{{item}}</div>
</ul> new Vue({
el:'#demo',
data:{
list=[0,1,2,3,4,5,6,7,8,9,10]
},
methods:{
push:function(){
this.list.push(11);
this.nextTick(function(){
alert('数据已经更新')
});
this.$nextTick(function(){
alert('v-for渲染已经完成')
})
}
}})
最新文章
- ASP.NET Core真实管道详解[2]:Server是如何完成针对请求的监听、接收与响应的【上】
- 动画效果interpolator
- Creating a SharePoint Sequential Workflow
- SQL查询每个表的字段数量
- JDBC简介及编码步骤
- 车销 商场 批发零售无线POS开单 智能POS开单打印 开单APP应用-云POS扫描打印一体方案
- socket服务器开发中的SO_REUSEADDR选项与让人心烦的TIME_WAIT
- PyOpenGL利用文泉驿正黑字体显示中文字体
- C++中的const详解
- Nginx Google 扩展
- BZOJ2961: 共点圆
- uva 10496 Collecting Beepers
- nodejs实现本地上传图片并预览功能(express4.0+)
- 精读《javascript高级程序设计》笔记三——面向对象的程序设计
- Xenu-web开发死链接检測工具应用
- GotoTest
- 游戏开发之在UE4中编写C++代码控制角色
- SSL/TLS通信
- hashMap源码分析1--翻译
- App上架流程[利用Archive进行上传]