vue nextTick 无法获取dom

什么是Vue.nextTick()??

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

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;

理解:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,

总结一下项目中遇到的问题

用vue qrcode 生成二维码插件的时候,由于页面的元素还没有更新。所以没有获取到dom元素

用$nextTick也无法获取到更新的dom元素。

产生原因分析:因为生成二维码的div是新加上的。不是原来的元素。所以无法获取更新。

解决办法:里面包一层setTimeout 。setTimeout异步,等所有的同步执行完毕后再执行

setTimeout,它的工作原理是这样的,当你定义setTimeout那一刻起(不管时间是不是0),js并不会直接去执行这段代码,而是把它扔到一个事件队列里面,当页面中所有同步任务都干完了以后,才会去执行事件队列里面的代码

this.$nextTick(() => {

setTimeout(() => {

}, 0)

})

猜你喜欢

转载自blog.csdn.net/qq_25687271/article/details/107786529