您的位置:首页 > Web前端 > Vue.js

Vue.nextTick( )

2020-06-29 05:02 811 查看

背景

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替。
如果想立即操作更新后的dom,就必须使用Vue.nextTick()

参数

参数分可传、可不传两种情况

  • 不传参数
    不传参数则不会执行任何逻辑操作,只是单纯的获取更新后的dom

  • 传入callback函数
    vue会调用该回调函数执行相关dom操作

  • 传入context
    传入新的上下文环境后可以基于新上下文环境操作更新的dom fn.call( context )

常用情况

1、在created生命周期中进行dom操作,因为在created声明周期中dom节点还没有挂载,所以在该生命周期不可以操作dom,如果必须操作则将函数通过Vue.nextTick( )来执行。
2、基于新的dom进行相关操作

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: