下面是一些基本概念和用法：
Setup 函数
Vue 3 中的每个组件都可以包含一个 setup 函数。setup 函数是组合式 API 的入口，它在组件实例被创建之前执行，可以返回一个对象，该对象中的属性和方法将被暴露给组件的模板部分。
<template>
<div>
<p>{{ message }}</p>
<button @click="increaseCount">Increase Count</button>
</div>
</template>
<script>
export default {
setup() {
const message = 'Hello, Vue 3!';
const count = ref(0);
const increaseCount = () => {
count.value++;
};
return {
message,
count,
increaseCount
};
}
};
</script>
在上述例子中，setup 函数返回一个对象，其中包含了 message、count 和 increaseCount。这些属性和方法可以在模板中直接使用。
Reactive
reactive 是 Composition API 提供的一个函数，用于创建响应式对象。与 Vue 2.x 中的 data 不同，reactive 可以用于创建任何数据结构的响应式版本。
import { reactive } from 'vue';
setup() {
const state = reactive({
message: 'Hello, Vue 3!',
count: 0
});
const increaseCount = () => {
state.count++;
};
return {
state,
increaseCount
};
}
Ref
ref 是用于创建一个包装基本类型值的对象，使其成为响应式的。在 setup 函数中，你可以使用 ref 来创建响应式变量。
import { ref } from 'vue';
setup() {
const message = ref('Hello, Vue 3!');
const count = ref(0);
const increaseCount = () => {
count.value++;
};
return {
message,
count,
increaseCount
};
}
Computed
computed 函数可以用于创建计算属性，与 Vue 2.x 中的计算属性类似。
import { ref, computed } from 'vue';
setup() {
const count = ref(0);
const doubledCount = computed(() => {
return count.value * 2;
});
const increaseCount = () => {
count.value++;
};
return {
count,
doubledCount,
increaseCount
};
}
这是一个简单的介绍，Composition API 还提供了其他很多功能和钩子，例如 watch、onMounted、onUpdated 等，使得组件的逻辑更加清晰、可维护。根据具体的业务需求，你可以选择灵活使用 Composition API 来组织和管理组件的逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/512/Vue 3.0