vue3中使用setup写一个微信聊天内容框

在Vue3中使用`setup()`函数来编写微信聊天内容框，可以先定义一个组件并在`setup()`中返回模板和方法。

下面是一个简单的例子：

<template>
  <div>
    <div v-for="(msg, index) in messages" :key="index">
      <p>{{ msg.sender }}:</p>
      <p>{{ msg.content }}</p>
    </div>
    <input v-model="inputMsg" @keyup.enter="sendMessage" placeholder="请输入消息" />
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      messages: [
        { sender: 'Tom', content: 'Hello' },
        { sender: 'Jerry', content: 'Hi' },
      ],
      inputMsg: '',
    });

    const sendMessage = () => {
      if (state.inputMsg.trim() !== '') {
        state.messages.push({
          sender: 'Me',
          content: state.inputMsg.trim(),
        });
        state.inputMsg = '';
      }
    };

    return { messages: state.messages, inputMsg: state.inputMsg, sendMessage };
  },
};
</script>

上述代码中，我们使用了Vue3中的`reactive`函数来创建响应式数据对象`state`，然后在`setup()`函数中定义了`messages`数组和`inputMsg`变量来分别存储聊天记录和当前输入的消息。`sendMessage`函数用于将输入的消息添加到聊天记录中。

在模板中，我们使用了Vue3中的`v-for`指令来遍历`messages`数组，将聊天记录展示出来。使用`v-model`指令将输入框和`inputMsg`变量进行双向绑定，使用`@keyup.enter`指令监听回车键按下事件，触发`sendMessage`函数来添加新的聊天记录。