第一个组合式 API 组件

实现一个组合式 API 组件

为了开始使用组合式 API，我们首先需要一个可以实际使用它的地方。在 Vue 组件中，我们将此位置称为 setup。

重要说明

在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

setup 是一个接收 props 和 context 的函数，我们将在之后进行讨论。此外，我们将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

让我们把 setup 添加到组件中：

setup() 语法示例

<template>
	<div>
		姓名 : {{user}}<br />
		年龄 : {{age}}
	</div>
</template>
<script>
import {ref} from "Vue";
export default {
	// 普通方式定义属性
	props: {
		user: {
			type: String,
			default:"LessCode"
		}
	},
	// setup 语法
	setup(props) {
		// 获得组件定义的属性数据 { user: '' }
		console.log(props);
		
		// 如定义一个变量
		const age = ref(18);
		// 这里返回的任何内容都可以用于组件的其余部分
		return {
			age
		}
	}
	// 组件的“其余部分”
}
</script>

全部使用组合 api

<template>
	<div>
		姓名 : {{user}}<br />
		年龄 : {{age}}
	</div>
</template>
<script>
import {ref} from "Vue";
export default {
	// setup 语法
	setup() {
		// 定义变量
		const age = ref(18);
		const user = ref('LessCode..');
		// 这里返回的任何内容都可以用于组件的其余部分
		return {
			age, user
		}
	}
	// 组件的“其余部分”
}
</script>