当前位置：首页 > news >正文

Vue 3 30天精进之旅：Day 09 - 组合式API

news 来源：原创 2025/5/14 3:53:37

在Vue 3中，组合式API（Composition API）是一个引入的新特性，它为开发者提供了一种更灵活的方式来构建和组织组件。与传统的选项API相比，组合式API更注重逻辑的复用和逻辑的组合，让我们更容易处理大型应用中的复杂性。今天，我们将深入探讨组合式API的核心概念和用法。

1. 组合式API概述

组合式API通过 setup 函数来定义组件的逻辑。这一函数会在组件实例创建之前执行，能够访问到组件的 props、context 和响应式数据。通过组合式API，我们能够将相同功能的逻辑提取到一个地方，从而减少代码重复，提高可维护性。

以下是组合式API的一个基本结构示例：

javascript

<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}return {count,increment,};},
};
</script>

在上面的示例中，我们使用 ref 创建一个响应性的 count 变量，并定义了 increment 方法来增加计数值。所有数据和方法都在 setup 中声明，然后返回到模板中使用。

2. 响应式数据

2.1. `ref` 和 `reactive`

在组合式API中，我们通常使用 ref 或 reactive 来创建响应式数据。

ref ：用于基本数据类型（如数字、字符串等）的响应式处理。

javascript

import { ref } from 'vue';const count = ref(0);
count.value++; // 访问 ref 值需要使用 .value

reactive ：用于对象或数组的响应式处理。

javascript

import { reactive } from 'vue';const state = reactive({count: 0,
});state.count++; // 直接访问属性

ref 和 reactive 的选择通常取决于数据的类型和结构。

2.2. 响应式数据的级联

使用组合式API时，ref 和 reactive 可以轻松实现深层次的响应式：

javascript

import { reactive } from 'vue';const state = reactive({user: {name: 'Alice',age: 30,},
});state.user.age++; // 直接访问

3. 计算属性与侦听器

组合式API还允许我们使用 computed 和 watch 来创建计算属性和侦听器。

3.1. 计算属性

使用 computed 来声明计算属性：

javascript

import { ref, computed } from 'vue';export default {setup() {const count = ref(0);const doubleCount = computed(() => count.value * 2);return {count,doubleCount,};},
};

计算属性会依赖于它们的响应式依赖，只有在这些依赖改变时才会重新计算。

3.2. 侦听器

使用 watch 来侦听数据的变化：

javascript

import { ref, watch } from 'vue';export default {setup() {const count = ref(0);watch(count, (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);});return { count };},
};

watch 可以侦听单个值，也可以侦听一个对象的变化，实现更复杂的数据反应。

4. 生命周期钩子

在组合式API中，我们还可以通过在 setup 中使用生命周期钩子。

javascript

import { onMounted, onUnmounted } from 'vue';export default {setup() {onMounted(() => {console.log('Component mounted');});onUnmounted(() => {console.log('Component unmounted');});},
};

这里我们使用 onMounted 和 onUnmounted 在组件的生命周期中执行特定操作。

5. 逻辑重用

组合式API的一个主要优点是其逻辑重用的能力。我们可以通过创建组合函数将多个逻辑结合在一起：

javascript

// useCounter.js
import { ref } from 'vue';export function useCounter() {const count = ref(0);const increment = () => {count.value++;};const decrement = () => {count.value--;};return { count, increment, decrement };
}// 在组件中使用
<template><div><p>{{ count }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script>
import { useCounter } from './useCounter';export default {setup() {const { count, increment, decrement } = useCounter();return {count,increment,decrement,};},
};
</script>

这样，我们就可以在多个组件中复用 useCounter 函数，保持代码的DRY（Don't Repeat Yourself）原则。

6. 总结

组合式API为我们提供了一种新的思考组件逻辑的方式，它使得数据和方法的组织更加灵活，适用于构建大型和复杂的应用。通过使用 setup、ref、reactive、computed、以及 watch 等功能，我们能够更清晰地表达逻辑，使得组件更易于理解和维护。

练习

创建一个简单的计数器应用，使用组合式API实现计数的增加和减少；
尝试将状态管理逻辑提取到自定义的组合函数中，如 useToggle 来处理布尔状态的切换；
在你的 Todo 应用中使用组合式API，重构组件逻辑，提高代码的复用性。

通过今天的学习，我们希望你对Vue 3的组合式API有了更深入的理解。在接下来的学习中，我们将继续探索 Vue Router 的基本用法，以帮助我们配置和管理应用的路由。保持学习的热情，明天见！

1. 组合式API概述

2. 响应式数据

2.1. ref 和 reactive

2.2. 响应式数据的级联

3. 计算属性与侦听器

3.1. 计算属性

3.2. 侦听器

4. 生命周期钩子

5. 逻辑重用

6. 总结

练习

相关文章：

2.1. `ref` 和 `reactive`