Vue监听器中scrollIntoView失效：聊天APP无法自动滚动到新消息

问题 #

我在用Vue3开发聊天应用时遇到一个问题：新消息出现时，应用无法像常规聊天APP那样自动滚动到底部。手动点击顶部的"Scroll"按钮时scrollIntoView方法有效，但Vue监听器触发时却没效果。

原因分析 #

1. watch监听未深度触发：你通过watch(messages, ...)监听数组，但用push修改数组时，数组的引用并未改变，默认的watch是浅监听，无法检测到数组内部元素的变化，导致回调不执行。
2. DOM更新时机不匹配：即使watch触发，Vue的DOM更新是异步的，watch回调执行时新消息的DOM还未完成渲染，此时调用scrollIntoView，容器高度尚未更新，滚动位置自然不符合预期。

解决方案 #

方案一：修复watch监听逻辑 #

给watch添加深度监听配置，并使用nextTick等待DOM更新完成后再执行滚动：

<template>
  <section>
    <button @click="scrollToElement()">Scroll</button>
    <ul ref="chatContainer">
      <li v-for="message in messages" :key="message.id">
        {{ message.title }}
      </li>
    </ul>
  </section>
</template>

<script setup>
import { onMounted, ref, watch, nextTick } from 'vue'

const chatContainer = ref(null)
const messages = ref([])

const fetchChatMessages = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  const messagesArr = await response.json()
  messages.value = messagesArr
}

const addNewMessage = () => {
  const newMessage = {
    userId: 1,
    id: messages.value.length + 1,
    title: 'New Message',
    body: 'This is a new chat message.'
  }
  messages.value.push(newMessage)
}

const scrollToElement = () => {
  const el = chatContainer.value
  el.scrollIntoView({ block: 'end', behavior: 'smooth' })
}

watch(messages, async () => {
  if (chatContainer.value) {
    await nextTick() // 等待DOM更新完成
    scrollToElement()
  }
}, {
  immediate: true,
  deep: true // 开启深度监听数组内部变化
})

onMounted(async () => {
  await fetchChatMessages()

  setInterval(() => {
    addNewMessage()
  }, 1000)
})
</script>

方案二：直接在消息更新后触发滚动（更直观） #

去掉watch，直接在获取初始消息和添加新消息的方法中，用nextTick确保DOM更新后执行滚动：

<template>
  <section>
    <button @click="scrollToElement()">Scroll</button>
    <ul ref="chatContainer">
      <li v-for="message in messages" :key="message.id">
        {{ message.title }}
      </li>
    </ul>
  </section>
</template>

<script setup>
import { onMounted, ref, nextTick } from 'vue'

const chatContainer = ref(null)
const messages = ref([])

const fetchChatMessages = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  const messagesArr = await response.json()
  messages.value = messagesArr
  await nextTick()
  scrollToElement()
}

const addNewMessage = async () => {
  const newMessage = {
    userId: 1,
    id: messages.value.length + 1,
    title: 'New Message',
    body: 'This is a new chat message.'
  }
  messages.value.push(newMessage)
  await nextTick()
  scrollToElement()
}

const scrollToElement = () => {
  const el = chatContainer.value
  el.scrollIntoView({ block: 'end', behavior: 'smooth' })
}

onMounted(async () => {
  await fetchChatMessages()

  setInterval(() => {
    addNewMessage()
  }, 1000)
})
</script>

额外优化：滚动到最后一条消息 #

可以直接滚动到最后一条消息的元素，让滚动位置更精准：

<template>
  <section>
    <button @click="scrollToElement()">Scroll</button>
    <ul ref="chatContainer">
      <li 
        v-for="message in messages" 
        :key="message.id" 
        :ref="(el) => { if (message.id === messages.value.length) lastMessageRef = el }"
      >
        {{ message.title }}
      </li>
    </ul>
  </section>
</template>

<script setup>
import { onMounted, ref, nextTick } from 'vue'

const lastMessageRef = ref(null)
const messages = ref([])

// ... 其他方法不变

const scrollToElement = () => {
  if (lastMessageRef.value) {
    lastMessageRef.value.scrollIntoView({ block: 'end', behavior: 'smooth' })
  }
}
</script>

内容的提问来源于stack exchange，提问作者redshift