nextTick() 不触发 DOM 更新答案

【问题标题】：nextTick() not triggering DOM updatenextTick() 不触发 DOM 更新
【发布时间】：2022-01-19 22:39:53
【问题描述】：

我正在创建一个消息传递应用程序，但在将新消息添加到数组时滚动到 ion-content 元素的底部时遇到了一些问题。我正在使用 ion-content 附带的 scrollToBottom() 方法，并且我正在使用 Vue 3 中的 Composition API。

考虑这个sn-p：

setup(props) {
  const replyContent = ref("")
  const messages = ref([])

  // References to ion-content in the template
  const ionContent = ref(null)

  const reply = async () => {
    const message = await replyToThread(props.threadId, replyContent.value).then((message) => message)

    messages.value.push(message)

    nextTick(() => {
      console.log("DOM updated!")

      if (ionContent.value) {
        ionContent.value.$el.scrollToBottom()
      }
    })
  }

  return { replyContent, messages, ionContent, reply }
}

replyToThread() 执行 API 调用并返回新消息，nextTick() 应确保我的 DOM 已更新，以便我可以使用它。控制台确实成功记录了“DOM 已更新！”，但没有滚动到底部。

但是，不知何故，每次nextTick() 不起作用时，当我用以下代码替换nextTick() 代码块时，它可以完美地工作：

setTimeout(() => {
  if (ionContent.value) {
    ionContent.value.$el.scrollToBottom()
  }
}, 200)

我必须将超时设置在 200 毫秒左右，否则它不起作用。但是当像nextTick() 这样的花哨的东西可以做到这一点时，依靠这个感觉很脏。有谁知道为什么会这样？

【问题讨论】：

标签： vue.js ionic-framework vuejs3 ionic5

【解决方案1】：

那是因为nextTick() 只保证实际的 DOM 已经更新：并不意味着浏览器实际上已经完成了页面的布局。这就是您需要任意超时以确保滚动正常工作的原因，因为在 200 毫秒之后，浏览器可能会根据更新的 DOM 完成布局。

要解决此问题，您可能需要依赖window.requestAnimationFrame：

nextTick(() => {
    window.requestAnimationFrame(() => {
        if (ionContent.value) {
            ionContent.value.$el.scrollToBottom()
        }
    });    
});

如果您觉得嵌套过多，您可以创建一个基于 rAF 返回承诺的方法：

methods: {
    rAF: function() {
        return new Promise(r => window.requestAnimationFrame(r));
    }
}

然后确保nextTick() 和rAF() 返回的承诺在滚动之前得到解决：

await nextTick();
await this.rAF();
if (ionContent.value) {
    ionContent.value.$el.scrollToBottom();
}

【讨论】：