用vue3模拟微信聊天，显示头像及消息置底后自动上滑的功能代码

可以使用Vue3中的`ref`和`watch`来实现此功能。以下是一个简单的示例代码：

HTML模板：

<template>
  <div class="chat-box" ref="chatBox">
    <div class="message" v-for="msg in messages" :key="msg.id">
      <img :src="msg.avatar" alt="avatar">
      <div class="content">{{ msg.content }}</div>
    </div>
  </div>
</template>

JavaScript代码：

import { ref, watch } from 'vue';

export default {
  setup() {
    const messages = ref([]);
    const chatBox = ref(null);

    // 模拟添加消息到聊天记录
    function addMessage(msg) {
      messages.value.push(msg);
    }

    // 监听聊天记录的变化，自动滚动到底部
    watch(messages, () => {
      chatBox.value.scrollTop = chatBox.value.scrollHeight;
    });

    return {
      messages,
      chatBox,
      addMessage
    };
  }
};

在`setup`函数中创建了一个`ref`对象`chatBox`来引用聊天框的DOM元素，同时创建了一个`watch`来监听`messages`数组的变化，当`messages`数组发生变化时，会自动将聊天框滚动到底部。在`addMessage`函数中模拟向聊天记录中添加消息的操作。在HTML模板中，使用`v-for`指令循环渲染聊天记录，并使用`ref`指令将`chatBox`对象绑定到聊天框的DOM元素上。