Vue3 監聽數據更新使div滾動到底部的實現（聊天框場景）

參考

• vue中監聽數據變化 watch
• vue中watch不觸發、不生效的解決辦法及原理
• vue-$nextTick-等待頁面渲染完畢的回調

起因

最近在做一個聊天功能，通過 ref 鈎子綁定頁面實現滾動底部后出現滾動不到底部的情況，猜測是頁面未更新完畢的時候，就將 div 滾動到之前狀態的底部。

代碼

1. html 容器代碼， .message-container 容器需要有具體高度。

   <div class="message-container" ref="messageContainer">
   		<a-space direction="vertical" fill>
   		  <MessageItemView
   			v-for="i in messages"
   			:key="i"
   			:propIsMe="i.isMe"
   			:propMessage="i.content"
   		  />
   		</a-space>
   	  </div>
   

   	.message-container {
   	  height: calc(100% - 191px);
   	  padding: 10px 24px;
   	  position: relative;
   	  background-color: #fbfcfe;
   	  overflow-y: auto;
   	}
   

2. 通過 watch 監聽數據更新，並等待頁面加載完畢后滾動到 div 底部。

    data() {
   	return {
   	  messages: [
   		{
   		  type: "text",
   		  isMe: false,
   		  content: "你好，我是夏秋初。",
   		}
   	  ],
   	  content: "",
   	};
     },
     watch: {
   	messages: {
   	  handler(newVal, oldName) {
   		/**
   		 * 頁面更新完畢后再將頁面滾動到底部
   		 */
   		this.$nextTick(() => {
   		  this.$refs.messageContainer.scrollTop =
   			this.$refs.messageContainer.scrollHeight;
   		});
   	  },
   	  deep: true,
   	  immediate: false,
   	},
     },