Vue 3 Composition API 入门指南
什么是 Composition API?
Composition API 是 Vue 3 引入的一种新的组件逻辑组织方式,它允许我们根据逻辑功能来组织代码,而不是按照选项类型。
为什么使用 Composition API?
- 更好的逻辑复用:通过组合函数可以轻松复用组件逻辑
- 更灵活的代码组织:根据功能组织代码,提高可读性和可维护性
- 更好的类型推导:对 TypeScript 支持更友好
- 更小的生产包体积:按需引入,减少打包体积
基本使用
setup 函数
<template>
<div>
<h1>{{ title }}</h1>
<button @click="increment">点击次数: {{ count }}</button>
</div>
</template>
<script lang="ts">
import { ref, onMounted } from 'vue'
export default {
setup() {
const title = ref('Composition API 示例')
const count = ref(0)
const increment = () => {
count.value++
}
onMounted(() => {
console.log('组件挂载完成')
})
return {
title,
count,
increment
}
}
}
</script>组合函数
// useCounter.ts
import { ref, computed } from 'vue'
export function useCounter(initialValue = 0) {
const count = ref(initialValue)
const doubleCount = computed(() => count.value * 2)
const increment = () => {
count.value++
}
const decrement = () => {
count.value--
}
return {
count,
doubleCount,
increment,
decrement
}
}总结
Composition API 为 Vue 开发者提供了一种更灵活、更强大的方式来组织组件逻辑。它特别适合大型应用和需要复杂逻辑复用的场景。
通过学习和使用 Composition API,我们可以编写更清晰、更可维护的 Vue 组件代码。