记vue nextTick用到的地方

2024-09-03 07:54:54

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等图形库结合使用的时候，在以下情况可能出现异常

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

以上问题都可以通过nextTick解决，完毕。

加几个写的不错的链接

最新文章

热门文章