切换模式中, resetCurrentIndex()和setPlaylist()互换位置为什么效果不一样

Question

先调用.resetCurrentIndex() 重置currentIndex, 再调用setPlaylist()更改播放列表时, 在watch中监听的currentSong(new, old) new的id与old的id是一致的。

但如果先调用setPlaylist()更改播放列表, 在调用resetCurrentIndex()重置currentIndex, 此时watch中的new.id 与 old.id 不一样。为什么会有这种差异?

Answer 1

提问者 我_PT 2020-12-04 16:28:41

通过 控制台打印测试,  发现  调用setCurrentIndex()时,   getters里面的currentSong()  没有被触发,   而是在调用完setPlaylist()后,  getters里面的currentSong才被触发。 这就很奇怪了,  这不应该要触发两次currentSong才对吗?  为什么每次都是在调用完setPlaylist()时 才触发  currentSong()

• ustbhuangyi #1

  vuex getters 底层使用 computed 计算属性实现的，而计算属性的底层是基于 watcher 实现的，这个 watcher 是非同步的，所以它的依赖数据改到计算属性内部重新计算是在 nextTick 后的，所以也就是 currentSong 的依赖都修改完毕后触发重新渲染，在 nextTick 后触发 currentSong 的一次重新计算

• 提问者 我_PT 回复 ustbhuangyi #2

  getters中的currentSong依赖着state中的currentIndex和playlist,  切换模式方法中: setCurrentIndex()和setPlaylist()是同步一起执行的。    因为触发currentSong重新计算是在setCurrentIndex()和setPlaylist()执行完毕后  所以getters中currentSong() 只会被触发一次(老师, 这里理解对吗?)

• ustbhuangyi 回复 提问者 我_PT #3

  可以这么理解，中间隔着一个 tick