不是vue2，而是vue3代码

好的，下面给你展示一个简单的 Vue 3 组件代码示例：

<template>
  <div class="example">
    <h2>{{ title }}</h2>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.title }}</li>
    </ul>
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
import { reactive, onMounted } from 'vue'
import axios from 'axios'

export default {
  name: 'Example',
  setup() {
    const state = reactive({
      title: '牛逼的 Vue 3 组件',
      list: [],
      page: 1,
      pageSize: 10
    })

    const loadData = () => {
      // 发送异步请求，获取数据
      axios.get('/api/list', { params: { page: state.page, pageSize: state.pageSize } })
        .then(response => {
          state.list = state.list.concat(response.data)
        })
    }

    const loadMore = () => {
      state.page++
      loadData()
    }

    onMounted(() => {
      loadData()
    })

    return {
      ...state,
      loadMore
    }
  }
}
</script>

<style>
.example {
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

这个组件和之前的 Vue 2 示例非常相似，但是使用了 Vue 3 的 Composition API 来编写。在 Vue 3 中，我们可以通过 `reactive` 函数将组件状态变量转换为响应式对象，从而实现状态的更新和监听。同时，我们也使用了 `onMounted` 钩子来代替 Vue 2 中的 `mounted` 钩子。

此外，由于 Vue 3 中废弃了 Vue 2 中的 `$attrs` 和 `$listeners`，我们需要通过 `return` 语句将组件状态和方法暴露给模板，这也是 Vue 3 的一个新特性。

总体来说，Vue 3 的代码编写相对于 Vue 2 更加简洁和易读，同时也具备了更好的性能和扩展性。