Vue 3 的 Composition API 是一种全新的组织和管理组件代码的方式，允许您在单个 setup 函数中编写更灵活、可重用的代码。以下是一些常见的 Composition API 特性及其用法：
ref：用于创建一个响应式引用。创建后，您可以使用 .value 访问和修改其值。
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 0
count.value++; // count.value 现在是 1
reactive：用于创建一个响应式对象。与 ref 类似，但用于对象。
import { reactive } from 'vue';
const state = reactive({ count: 0 });
console.log(state.count); // 0
state.count++; // state.count 现在是 1
computed：用于创建计算属性。它接受一个函数，并返回一个只读的响应式引用。
import { ref, computed } from 'vue';
const count = ref(0);
const doubled = computed(() => count.value * 2);
console.log(doubled.value); // 0
count.value++; // doubled.value 现在是 2
watch 和 watchEffect：用于监视响应式引用和/或响应式对象的变化，并在它们发生变化时执行函数。
import { ref, watch, watchEffect } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
});
watchEffect(() => {
console.log(`Count is now ${count.value}`);
});
count.value++; // 输出：
// Count is now 1
// Count changed from 0 to 1
生命周期钩子：Vue 3 提供了与 Vue 2 类似的生命周期钩子函数，如 onMounted、onUpdated 和 onUnmounted。
import { onMounted, onUpdated, onUnmounted } from 'vue';
onMounted(() => {
console.log('Component mounted');
});
onUpdated(() => {
console.log('Component updated');
});
onUnmounted(() => {
console.log('Component unmounted');
});
setup：在组件中使用 Composition API 的入口点。在此函数中，您可以使用响应式引用、计算属性、监视器和生命周期钩子等功能。setup 函数应返回一个对象，该对象包含要暴露给模板的数据和方法。
<template>
<button @click="increment">{{ count }}</button>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
function increment() {
count.value++;
}
onMounted(() => {
console.log('Component mounted');
});
return {
count,
increment
};
}
};
