今天做滚动的时候发现些问题:
- 当我的渲染数据数组使用reactive定义时,请求回来的数据并不会让页面的初定死数据更新,但是使用ref可以更新
- 当使用初定死数据时,挂载之后能正常获取DOM元素,页面会从死数据到正常数据的过渡(难看)
- 当不使用初定的死数据而仅仅空数组时,使用nextTick(() => {function()…}),也不能获取DOM元素,但是setTimeout可以。(或者两者结合,setTimeout可以设0)
- 不过似乎把nextTick()放进监听watch里面可以解决3,没试,不过之前的轮播nextTick我看了确实是放进watch监听里面的
总结:setTimeout可以解决所有问题。。。
import { nextTick } from 'vue'// 使用active页面不进行重新的渲染,但是下面两种ref都可以
// let menuData = reactive([])// 如果有假数据,肯定能获取到DOM的,但是第二次真正数据请求回来nextTick里面的也没有再次执行
let menuData = ref([{name:....},{name:....}])// 如果没有假数据,nextTick的回调一样初始和更新后都获取不到DOM元素
let menuData = ref([])
...其余代码...
// getRightHeightArr()
// nextTick(() => getRightHeightArr())
setTimeout(() => getRightHeightArr(), 100)// 还可以nextTick里面嵌入setTimeout,这里的时间可以写0
nextTick(() => setTimeout(() => getRightHeightArr(), 0))
参考:
参考1
参考2