为什么这里使用watch监听sliders的变化没有生效呢?

来源:2-7 轮播图组件的开发

慕莱坞0998854

2021-04-11

    老师你好,对于您在视频中提到的"BScoll初始话的时候需要至少一条数据,而我们的sliders是异步获取的"这一问题,老师的解决办法是使用v-if="sliders.length"来确保拿到数据之后再渲染。

   我突然想到为什么不能用watch的方式来监听sliders的变化再调用bs实例的refresh方法来解决这样的问题呢,于是我并没有写v-if, 而是写下了以下代码

http://img.mukewang.com/szimg/60730ea809e71b9b13510866.jpg

此时奇怪的问题是,箭头处的回调函数似乎不会执行???

我又改成了如下形式

http://img.mukewang.com/szimg/607311da094f516415090799.jpg

这次似乎watch成功了,但是新的错误又来了:

http://img.mukewang.com/szimg/6073125a09bf8fd318410667.jpg

真的很伤脑筋,我还想问下,watch的回调函数和onMounted这个生命周期钩子函数哪个先执行啊?

写回答

2回答

ustbhuangyi

2021-04-11

watch 的回调函数和 onMounted 的生命周期钩子函数执行顺序没有关系,如果你 watch 里初始化,理论上这个时候一定 mounted 了,因为数据是异步的,那么你就不需要再写 onMounted 了,但是你这么写增加了代码的逻辑复杂度,没有必要,不如 v-if="sliders.length" 更直观和简单

0
2
慕莱坞0998854
谢谢老师!
2021-04-11
共2条回复

ustbhuangyi

2021-04-11

//img.mukewang.com/szimg/60731285098a181c15120194.jpg

组件调用的地方需要加一下限制,为了保证至少有一条数据。

而且 2-8 节视频已经说了这个问题了

0
1
慕莱坞0998854
对不起老师,我刚看到下一节说了这个。然后我修改了问题,希望老师看看。
2021-04-11
共1条回复

Vue3开发企业级音乐Web App 明星讲师带你学大厂代码

慕课网明星讲师黄轶深度讲解 Vue3.0 ,提升的不止是Vue代码能力

2223 学习 · 1002 问题

查看课程