以下是组合式 API 的主要概念和用法：
setup 函数
每个使用组合式 API 的组件都必须包含一个名为 setup 的函数。setup 函数在组件实例创建之前执行，允许你设置组件的状态、计算属性、方法等。
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
setup() {
const message = 'Hello, Composition API!';
return {
message
};
}
};
</script>
响应式引用
ref 和 reactive 仍然是组合式 API 中用于创建响应式数据的函数。使用 ref 可以包装基本类型数据，而 reactive 用于创建响应式对象。
<script>
import { ref, reactive } from 'vue';
export default {
setup() {
const count = ref(0);
const state = reactive({
message: 'Hello',
count
});
return {
count,
state
};
}
};
</script>
computed 函数
computed 函数用于创建计算属性，它接受一个 getter 函数，根据其依赖自动追踪响应式变化。
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const doubledCount = computed(() => count.value * 2);
return {
count,
doubledCount
};
}
};
</script>
生命周期钩子
组合式 API 中引入了一些新的生命周期钩子函数，例如 onMounted、onUpdated、onUnmounted 等，用于在组件生命周期的不同阶段执行逻辑。
<script>
import { onMounted, onUnmounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('Component mounted');
});
onUnmounted(() => {
console.log('Component unmounted');
});
}
};
</script>
watch 和 watchEffect
watch 函数用于侦听响应式数据的变化，执行自定义的回调函数。watchEffect 则是一个无需手动指定依赖的侦听函数，它会自动追踪内部响应式数据的变化。
<script>
import { ref, watch, watchEffect } from 'vue';
export default {
setup() {
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`count changed from ${oldValue} to ${newValue}`);
});
watchEffect(() => {
console.log(`count is ${count.value}`);
});
return {
count
};
}
};
</script>
组合式 API 提供了一种更灵活和清晰的组织代码的方式，特别适用于大型项目或者需要更好代码拆分和复用的场景。组合式 API 并不取代 Options API，而是为其提供了一种补充和扩展。在开发过程中，你可以根据项目的需求选择使用 Options API 或组合式 API。
转载请注明出处：http://www.zyzy.cn/article/detail/517/Vue 3.0