vue自定义book组件，组合式api形式

Vue 自定义 book 组件通常通过 Vue 3 的组合式 API 来创建，这种API让开发者可以更清晰地组织代码，并提高复用性和维护性。以下是使用组合式API创建一个简单的 Book 组件的步骤：

1. **声明组件**: 首先，在你的 `.vue` 文件中导入 `setup()` 函数，这是组合式 API 中定义组件逻辑的地方。

<template>
  <div class="book">
    <h2>{{ title }}</h2>
    <p>作者：{{ author }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义组件数据
const title = ref('Vue书');
const author = ref('Vue');
</script>

2. **使用 `ref` 和 ` computed`** (如果需要): `ref` 是状态管理工具，用于存储响应式的属性值。你可以使用它们来跟踪组件的状态。

3. **计算属性** (optional): 如果有复杂的业务逻辑需要处理，你可以使用 `computed` 来计算依赖其他 `ref` 的属性。

4. **事件处理**: 使用 `onMounted`, `onUpdate`, 或者直接绑定 `@click`、`@input` 等事件处理函数。

5. **导出并注册组件**: 在 `<script>` 标签外面，你可以选择导出这个组件以便在父组件或其他地方复用。

export default {
  name: 'Book',
  // 或者在 setup 下面的 components 属性里导出
  components: {},
};