Vue 3中的Composition API是一组新的API，它允许开发者使用函数式编程的方式来组织和复用组件逻辑。与Vue 2中的Options API（如data、methods、computed等选项）相比，Composition API提供了一种更加灵活和可组合的方式来编写组件逻辑。
下面是Composition API的一些主要方法和使用示例：
setup：这个函数在组件实例初始化之前被调用，可以在这里声明数据、计算属性、方法、生命周期钩子等。
javascript
export default {
setup() {
let name = "张三";
function greet() {
console.log(`Hello, ${name}!`);
}
return { name, greet }; // 必须在这里return，模板中才能使用
}
}
在模板中，你可以使用{{ name }}来显示name的值，以及<button @click="greet">Greet</button>来触发greet方法。
- ref和toRefs：ref用于定义一个基本类型的响应式数据，而toRefs则可以将响应式数据包装成一个普通的对象，使得在模板中可以直接使用对象的属性。
javascript
import { ref, toRefs } from 'vue';
export default {
setup() {
const count = ref(0);
const state = toRefs({
name: '张三',
age: 30
});
return { count, ...state };
}
}
computed：用于定义计算属性，只有当依赖的数据发生变化时才会重新计算。
javascript
import { ref, computed } from 'vue';
export default {
setup() {
const base = ref(1);
const doubled = computed(() => base.value * 2);
return { base, doubled };
}
}
watch和watchEffect：用于监听数据变化。watch可以监听特定的响应式数据，而watchEffect则会自动收集依赖并执行回调函数。
javascript
import { ref, watch, watchEffect } from 'vue';
export default {
setup() {
const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log(`Count changed from ${oldVal} to ${newVal}`);
});
watchEffect(() => {
console.log(`Count is ${count.value}`);
});
return { count };
}
}
生命周期钩子：虽然Composition API本身没有直接提供生命周期钩子的方法，但你可以通过onMounted、onUpdated等函数在setup中使用它们。
javascript
import { onMounted, onUpdated } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('Component mounted');
});
onUpdated(() => {
console.log('Component updated');
});
}
}
在使用Composition API时，需要注意的是，由于setup函数在组件创建之前执行，因此其中的this关键字不会指向当前组件实例，而是undefined。如果需要与父组件通信，可以通过setup函数的参数来获取props和context。
Composition API提供了一种更为灵活和可复用的方式来组织Vue组件的逻辑，尤其适用于大型和复杂的Vue应用。