【vue3.0 使用组合式定义组件】

Vue3.0 中通过使用 setup 函数来定义组件。setup 函数接收两个参数，第一个参数是组件的 props，第二个参数是一个上下文对象，可以通过它访问到与组件相关的数据和方法。在 setup 函数中，我们可以使用 Vue3.0 提供的新特性 — 组合式 API 来定义组件。

组合式 API 是 Vue3.0 中的一个新特性，它可以让我们更加直观和灵活地组织组件的逻辑。组合式 API 在 Vue2.x 中使用 mixins 实现，但在 Vue3.0 中已经被废弃，使用组合式 API 可以更好地管理组件的逻辑。

下面是一个使用组合式 API 定义组件的示例：

<template><div><h1>{{ title }}</h1><p v-for="item in items" :key="item.id">{{ item.text }}</p></div>
</template><script>
import { reactive } from 'vue'export default {props: {title: String,items: Array},setup(props, context) {const state = reactive({// 定义组件的响应式数据message: 'Hello Vue3.0!'})// 定义组件的方法function handleClick() {console.log(state.message)}// 返回组件需要的数据和方法return {state,handleClick}}
}
</script>

在上述示例中，我们使用 reactive 函数创建了一个响应式对象 state，并在 setup 函数中定义了一个方法 handleClick，最后通过 return 返回了组件需要的数据和方法。

在模板中使用这些数据和方法时，只需要通过 state 或 handleClick 来访问即可。例如，我们在模板中使用 {{ state.message }} 来显示 message 的值，使用 @click="handleClick" 来绑定 handleClick 方法到 click 事件上。

使用组合式 API 可以更加灵活地定义组件的逻辑，让我们在开发过程中更加便捷和高效。