帮我写一份VUE3 前端相应实现代码

在Vue 3中，我们可以创建一个简单的响应式组件来显示一些数据，并在数据变化时自动更新视图。下面是一个基础的Vue组件示例，它使用了`setup`函数来替代传统的`methods`和`data`：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">点击改变消息</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义响应式的message变量
const message = ref('Hello Vue 3!');

// 定义一个方法来改变message值
function changeMessage() {
  message.value = '你好，Vue 3的世界!';
}
</script>

在这个例子中，`ref`用于创建响应式的数据，当你试图修改它的值时，视图会自动更新。`@click`修饰符用于绑定按钮的点击事件。

如果你想要在JavaScript中编写，可以将`lang="ts"`改为`lang="js"`, 其他部分基本不变：

<!-- ... -->
<script setup lang="js">
import { ref } from 'vue';

// ...

const message = ref('Hello Vue 3!');
function changeMessage() {
  message.value = '你好，Vue 3的世界!';
}
</script>
<!-- ... -->