首页 > 其他 > 详细

记vue nextTick用到的地方

时间:2019-05-03 22:37:27      阅读:193      评论:0      收藏:0      [点我收藏+]

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

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

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

在实际的vue+element项目中与echart,antv G6等图形库结合使用的时候,在以下情况可能出现异常

  1. 使用element 的dialog,并且把echart图标放置在dialog中,第一次打开dialog时,echart图形没渲染,再次打开才会渲染
  2. 将G6作为一个组件,并且在watch钩子函数中监视图表数据的变动时,watch会报找不到attribute,其实就是dom还没渲染好

以上问题都可以通过nextTick解决,完毕。
加几个写的不错的链接

记vue nextTick用到的地方

原文:https://www.cnblogs.com/linyihai/p/10806881.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!