[教程]揭秘Vue3 Composition API：解锁组件开发新境界

Vue 3的Com API是Vue.js框架中的一个重大创新，它为组件开发提供了全新的思路和工具。通过引入Com API，Vue 3旨在解决Options API在处理复杂组件时的局限性，并使代码更加...

Vue 3的Composition API是Vue.js框架中的一个重大创新，它为组件开发提供了全新的思路和工具。通过引入Composition API，Vue 3旨在解决Options API在处理复杂组件时的局限性，并使代码更加模块化、可复用和易于维护。

什么是Composition API

Composition API是Vue 3提供的一套基于函数的API，它允许开发者以更灵活的方式组织和复用组件逻辑。这种API风格不同于传统的Options API，后者通过选项对象（如data、methods、computed等）来定义组件。

Composition API的主要特点：

1. 逻辑复用更便捷：通过组合函数（Composable Functions），可以轻松复用和共享逻辑。
2. 代码组织更清晰：将相关的状态和行为放在同一个函数中，减少了逻辑分散的问题。
3. TypeScript更友好：更好地支持类型推导，提升开发体验。

Composition API的核心概念

1. setup() 函数

setup()函数是Composition API的入口点，它在组件创建之前执行。它接收两个参数：props和context。setup()函数返回的对象中的所有属性都会被暴露给模板和其他选项（如computed、methods），因此你可以在模板中直接使用这些返回的属性。

import { ref } from 'vue';
export default { setup() { const count = ref(0); function increment() { count.value++; } return { count, increment }; }
};

2. 响应式数据

Composition API提供了ref和reactive函数来创建响应式数据。

• ref用于创建一个包含单个值的响应式对象。
• reactive用于将一个普通对象转换为一个响应式对象。

import { reactive } from 'vue';
const state = reactive({ count: 0, user: { name: 'Alice', age: 30 }
});

3. 计算属性和侦听器

computed函数用于定义计算属性，类似于Options API中的computed选项。watch和watchEffect允许你观察和响应Vue实例上的数据变动。

import { computed, watch } from 'vue';
const state = reactive({ count: 0
});
const doubleCount = computed(() => state.count * 2);
watch(state, (newState) => { console.log('State changed:', newState);
});
watchEffect(() => { console.log('Count is:', state.count);
});

4. 生命周期钩子

Vue 3中的生命周期钩子可以通过onBeforeMount、onMounted等函数来管理，替代了Vue 2中的mounted、updated等选项。

import { onBeforeMount, onMounted } from 'vue';
export default { setup() { onBeforeMount(() => { console.log('Component is before mounting'); }); onMounted(() => { console.log('Component is mounted'); }); }
};

实战案例：使用Composition API开发Todo应用

以下是一个简单的Todo应用的示例，展示如何使用Composition API来管理状态和逻辑。

<template> <div> <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a todo" /> <ul> <li v-for="(todo, index) in todos" :key="index"> {{ todo }} <button @click="removeTodo(index)">Remove</button> </li> </ul> </div>
</template>
<script>
import { ref } from 'vue';
export default { setup() { const newTodo = ref(''); const todos = ref([]); function addTodo() { if (newTodo.value.trim() !== '') { todos.value.push(newTodo.value); newTodo.value = ''; } } function removeTodo(index) { todos.value.splice(index, 1); } return { newTodo, todos, addTodo, removeTodo }; }
};
</script>

总结

Vue 3的Composition API为组件开发提供了新的可能性，使得代码更加模块化、可复用和易于维护。通过使用Composition API，开发者可以更灵活地组织组件逻辑，并利用响应式系统来简化状态管理。