在使用element-plus的loading加载组件时,发现了这么一个方法
引发思考:
第一行代码很好懂,创建一个ElLoading的实例,其中options时启动loading的配置项
第三行代码很好懂,关闭这个loading实例,
那么第二行这个nextTick是干什么用的呢
我们不妨反向思考一下,如果没有这个方法,直接写loadingInstance.close会发生什么.
结果显而易见,我只看到了屏幕闪了一下,那么动画呢?
这时候答案就显而易见了,如果没有nextTick包裹close()方法,创建loading实例并调用后页面根本就来不及播放完loading的加载动画,就会直接执行close()从而关闭动画!
我们来看看vue3官方文档是如何解释它的
回调是什么?
我们知道,vue实现响应式并不是数据一发生改变dom就立即更新的,而是按照一定的策略来更新dom,当一个方法中有多个回调函数执行时,vue不会等待其中的一个方法执行后立即更新dom,再去进行下一个方法的执行,而是会立即执行方法中所有的回调函数后才会更新dom,这也许是因为js是单线程的原因吧,所以我们就需要用到nextTick来保证这个方法中的某个回调函数可以在dom更新后再执行
它的原理其实就是:
原因是，vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和dom操作。而在下一个事件循环时，vue会清空队列，并进行必要的dom更新。
当你设置 vm.someData = 'new value'，dom并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的dom更新。如果此时你想要根据更新的 dom状态去做某些事情，就会出现问题。。为了在数据变化之后等待 vue完成更新 dom，可以在数据变化之后立即使用 vue.nextTick(callback) 。这样回调函数在 dom更新完成后就会调用。
