Vue中nextTick的作用有哪些-创新互联-成都快上网建站

Vue中nextTick的作用有哪些-创新互联

Vue中nextTick的作用有哪些?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

创新互联主要从事成都网站设计、网站建设、外贸网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务连山,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

起什么作用?

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

我想各位都知道或了解 Vue 的渲染流程,Vue 在监听到数据变化后会重新渲染,配合 VDOM 更新真实的 DOM,而 nextTick 的触发时机就是在调用方法后的第一次重新渲染完毕后。

Vue中nextTick的作用有哪些

如何使用?

有两种使用方法,一种是传入回调,另一种是 Promise,官方使用示例如下:

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
 // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示)
Vue.nextTick()
 .then(function () {
 // DOM 更新了
 })

如果在 SPA(单文件组件) 中,可能是这个样子



有什么使用场景?

需要等待渲染完成后执行的一些方法

初始化绑定或操作 DOM

比如在 created 和 mounted 回调中,需要操作渲染好的 DOM,则需要在 nextTick 中执行相关逻辑,这在必须使用一些老的需要绑定 DOM 的库时很有用。

比如,在加载 UEditor 时,可能会这样玩


看完上述内容,你们掌握Vue中nextTick的作用有哪些的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网站名称:Vue中nextTick的作用有哪些-创新互联
当前网址:http://kswjz.com/article/pdsid.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流