vue3，通过原生的方式让容器滚动无效，不知道是什么原因？

首先这分别是我的容器与内容：容器：内容：

通过onBeforeMount获取了数据后，我通过onMounted去获取dom

onMounted(() => {
   const el = tableRef.value.$el // 是容器dom
   console.log(el.scrollHeight, el.scrollTop) // 打印分别是 500 和 0

   el.scrollTop=el.scrollHeight // 无效
   el.scrollTo(0, 1000) // 无效
})

为什么上面的操作都无效呢？上面打印的500也让我不解 ，很明显滚动高度是大于500的

解决

一开始以为onMounted挂载好了我就可以获取dom了，但发现一个误区。数据初始的时候是空的，此时也走onMounted。后来请求之后数据变了，但走onMounted已经走过了，所以无法获取最新dom。解决方案有：1.把滚动到底部的操作写在onUpdated生命周期下（官方解释：注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。）

onUpdated(() => {
   const el = tableRef.value.$el
   el.scrollTop = el.scrollHeight
})

2.在onMounted中用定时器包裹，等一段时间后再获取dom

onMounted(() => {
   const timer = setTimeout(() => {
      const el = tableRef.value.$el
      el.scrollTop = el.scrollHeight
   }, 1000)
})

3.在更改响应式数据的后面用nextTick，传入回调函数，写滚动的操作（我觉得这个最好）

getLogs().then((data) => {
      state.logs = data.loglist
      nextTick(() => {
         const el = tableRef.value.$el
         el.scrollTop = el.scrollHeight
      })
})