简介

Composition API 是 Vue 3 引入的一种新的编写组件逻辑的方式。它通过将组件的逻辑按功能性分组，而不是按生命周期分组，从而提供更灵活的组件逻辑组合方式。Composition API 的核心是 setup 函数，组件内的逻辑通常在 setup 中定义。以下是它的基本概念：

setup 函数

• 是组件逻辑的入口点，在组件实例创建时被调用。
• 接收两个参数 props 和 context。
• 返回的对象属性可以被模板中直接访问。

<!-- 使用 Composition API 的基本示例 -->
<template><div>{{ message }}</div><button @click="increment">Increment: {{ count }}</button>
</template><script setup>
import { ref } from 'vue';const message = ref('Hello, Vue 3!');
const count = ref(0);const increment = () => {count.value++;
};
</script>

为什么要使用Composition API

逻辑复用和组织

• 问题：在选项式 API 中，组件的逻辑通常分散在 data、methods、computed 等属性中，很难复用和维护。
• 解决方案：Composition API 可以将相关的逻辑组合在一起，并可以通过自定义组合函数轻松复用逻辑。

更灵活的逻辑组合

• Composition API 提供了组合逻辑的自由度，可以更清晰地组织组件的功能。

适应未来的 Vue 生态系统

• Vue 3 和未来的 Vue 工具链都将大量使用 Composition API，因此尽早熟悉它会有助于适应未来的 Vue 生态系统。

options API存在的问题

代码重复：

逻辑相似的功能会在不同的组件中重复出现。

逻辑分散

同一功能的逻辑会分散在 data、methods、computed 和 watch 中，不易追踪。

缺乏复用性

尽管 mixins 可以复用一些逻辑，但存在命名冲突和可读性问题。

Composition API 中的 setup()入口

setup() 函数是 Composition API 的入口点，所有的组件逻辑都可以在这里定义。它接收两个参数 props 和 context。

props 参数

组件接收的属性，具有响应性。

context 参数

包含 attrs、slots 和 emit 属性
attrs：包含没有被显式声明的 props。
slots：传入的插槽内容。
emit：用于触发事件。

ref 响应式监听

ref 函数用于创建单一响应式值，它将一个普通数据类型或对象包装成响应式的引用，并且返回一个包含 .value 属性的对象。

<template><div>Count: {{ count }}</div><button @click="increment">Increment</button>
</template><script setup>
import { ref } from 'vue';const count = ref(0);const increment = () => {count.value++;
};
</script>

reactive与toRefs

reactive

将一个对象变为响应式对象。

<template><div><p>Name: {{ user.name }}</p><p>Age: {{ user.age }}</p></div>
</template><script setup>
import { reactive } from 'vue';const user = reactive({name: 'Alice',age: 30
});
</script>

toRefs

将 reactive 对象中的属性转换为 ref，以便可以解构和保持响应性。

<template><div><p>Name: {{ name }}</p><p>Age: {{ age }}</p></div>
</template><script setup>
import { reactive, toRefs } from 'vue';const user = reactive({name: 'Alice',age: 30
});const { name, age } = toRefs(user);
</script>

computed的用法

computed 用于定义基于其他响应式属性的计算属性，类似于选项式 API 中的 computed 属性。

<template><p>Double Count: {{ doubleCount }}</p>
</template><script setup>
import { ref, computed } from 'vue';const count = ref(2);
const doubleCount = computed(() => count.value * 2);
</script>

watch的用法

watch 用于观察响应式属性的变化并执行副作用操作。

<template><div><input v-model="name" placeholder="Name" /><p>{{ name }}</p></div>
</template><script setup>
import { ref, watch } from 'vue';const name = ref('Alice');watch(name, (newValue, oldValue) => {console.log(`Name changed from ${oldValue} to ${newValue}`);
});
</script>

setup()参数 props参数

props 是 setup 函数的第一个参数，包含父组件传递的属性。它是响应式的，但是不能解构，否则会失去响应性。

<!-- ParentComponent.vue -->
<template><ChildComponent message="Hello, Child!" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';
</script>

<!-- ChildComponent.vue -->
<template><div>{{ message }}</div>
</template><script setup>
import { defineProps } from 'vue';// 使用 defineProps
const props = defineProps({message: String
});
</script>

context参数

context 是 setup 函数的第二个参数，包含 attrs、slots 和 emit 属性。

emit

用于触发事件，类似于选项式 API 中的 $emit。

<!-- ParentComponent.vue -->
<template><ChildComponent @message="handleMessage" /><p>{{ parentMessage }}</p>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const parentMessage = ref('');const handleMessage = (msg: string) => {parentMessage.value = msg;
};
</script>

<!-- ChildComponent.vue -->
<template><button @click="sendMessage">Send Message to Parent</button>
</template><script setup>
import { defineEmits } from 'vue';const emit = defineEmits(['message']);const sendMessage = () => {emit('message', 'Hello from Child Component!');
};
</script>

attrs

包含没有显式声明的属性和事件。

<template><input v-bind="attrs" />
</template><script setup>
import { useAttrs } from 'vue';const attrs = useAttrs();
</script>

slots

包含传递的插槽内容。

<!-- ParentComponent.vue -->
<template><ChildComponent><template #header><h1>Custom Header</h1></template></ChildComponent>
</template><script setup>
import ChildComponent from './ChildComponent.vue';
</script>

<!-- ChildComponent.vue -->
<template><slot name="header"></slot><p>Default Content</p>
</template><script setup>
import { useSlots } from 'vue';const slots = useSlots();
</script>