首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue 3 Composition API

Vue3中使用Composition API管理组件状态

2025-08-12 09:58:53 作者：wangfang呀

Vue3的CompositionAPI通过reactive、ref、computed、watch等函数,实现更灵活、可组合的状态管理,提升逻辑复用与类型推导效率,x下面就来介绍一下如何使用

前言

在 Vue 3 中，Composition API 提供了一种新的组织和管理组件状态的方式。它通过一组函数（如 reactive、ref、computed、watch）使得组件的状态管理更加灵活和可组合，相比于 Vue 2 的 Options API，Composition API 使得逻辑复用和类型推导更加高效。

Composition API 主要是基于函数的，它让我们在组件中以更细粒度的方式管理状态、计算属性和副作用。

本文将介绍如何在 Vue 3 中使用 Composition API 来管理组件的状态，涵盖以下内容：

Composition API 状态管理：如何使用 Composition API 管理状态。
reactive 与 ref：使用 reactive 和 ref 管理响应式状态。
computed 与 watch：如何使用 computed 计算属性和 watch 监听状态变化。
代码示例：展示如何在 Vue 3 中使用 Composition API 管理组件状态。

概述：Composition API 状态管理

在 Vue 3 中，Composition API 通过以下几个主要的功能来管理组件状态：

reactive：用于创建响应式对象。
ref：用于创建响应式的基本数据类型（如字符串、数字、布尔值等）。
computed：用于创建基于响应式状态计算得出的值，类似于 Vue 2 中的计算属性。
watch：用于监听响应式数据的变化并执行副作用操作，类似于 Vue 2 中的 watch。

通过这些 API，我们可以在 Vue 3 中灵活地管理组件的状态和行为。

reactive与ref

reactive：用于创建响应式对象，通常用于管理对象类型的状态。它会递归地将对象的属性变为响应式。
ref：用于创建响应式的基本数据类型，如字符串、数字、布尔值等。ref 也可以用来创建对对象的引用，便于使用响应式状态。

1. 使用reactive管理对象状态

<template>
  <div>
    {{ state.counter }}
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    // 使用 reactive 创建响应式对象
    const state = reactive({
      counter: 0
    });

    const increment = () => {
      state.counter++;
    };

    return {
      state,
      increment
    };
  }
};
</script>

在这个例子中，使用 reactive 创建了一个包含 counter 属性的响应式对象。当 counter 改变时，视图会自动更新。

2. 使用ref管理基本数据类型的状态

<template>
  <div>
    {{ counter }}
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用 ref 创建响应式的基本数据类型
    const counter = ref(0);

    const increment = () => {
      counter.value++;
    };

    return {
      counter,
      increment
    };
  }
};
</script>

在这个例子中，使用 ref 创建了一个响应式的数字 counter，通过 .value 来访问和修改它的值。当 counter.value 改变时，视图会自动更新。

computed与watch

computed：用于创建计算属性，计算属性的值是基于响应式数据的计算结果，当相关数据变化时，计算属性会重新计算。
watch：用于监听响应式数据的变化，并执行副作用操作。watch 可以监听单一的响应式变量或多个响应式数据的变化。

1. 使用computed创建计算属性

<template>
  <div>
    {{ fullName }}
    <input v-model="firstName" placeholder="First Name">
    <input v-model="lastName" placeholder="Last Name">
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const firstName = ref('');
    const lastName = ref('');

    // 使用 computed 创建计算属性
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

    return {
      firstName,
      lastName,
      fullName
    };
  }
};
</script>

在这个例子中，fullName 是一个计算属性，它会自动基于 firstName 和 lastName 的变化来更新。当用户在输入框中输入名字时，fullName 会实时更新。

2. 使用watch监听响应式数据的变化

<template>
  <div>
    {{ counter }}
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const counter = ref(0);

    const increment = () => {
      counter.value++;
    };

    // 使用 watch 监听 counter 的变化
    watch(counter, (newValue, oldValue) => {
      console.log(`Counter changed from ${oldValue} to ${newValue}`);
    });

    return {
      counter,
      increment
    };
  }
};
</script>

在这个例子中，watch 用于监听 counter 的变化，并打印出变化前后的值。当 counter 发生变化时，watch 会执行相应的回调函数。

代码示例：使用 Composition API 管理组件状态

以下是一个完整的 Vue 3 示例，演示了如何使用 Composition API 来管理组件的状态，结合 reactive、ref、computed 和 watch 来实现响应式数据和计算属性的功能。

<template>
  <div>
    Vue 3 Composition API Example
    <div>
      <h2>Counter: {{ counter }}</h2>
      <button @click="increment">Increment</button>
    </div>
    <div>
      <h2>Full Name: {{ fullName }}</h2>
      <input v-model="firstName" placeholder="First Name">
      <input v-model="lastName" placeholder="Last Name">
    </div>
    <div>
      <p>Message: {{ message }}</p>
      <button @click="updateMessage">Change Message</button>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, watch } from 'vue';

export default {
  setup() {
    // 使用 ref 管理基本数据类型
    const counter = ref(0);
    const increment = () => counter.value++;

    // 使用 reactive 管理对象状态
    const firstName = ref('');
    const lastName = ref('');
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    // 使用 watch 监听数据变化
    const message = ref('Hello, Vue!');
    watch(message, (newValue, oldValue) => {
      console.log(`Message changed from "${oldValue}" to "${newValue}"`);
    });

    const updateMessage = () => {
      message.value = 'Vue 3 is awesome!';
    };

    return {
      counter,
      increment,
      firstName,
      lastName,
      fullName,
      message,
      updateMessage
    };
  }
};
</script>

在这个例子中：

counter 是一个基本的响应式数字，通过 ref 来管理。
firstName 和 lastName 是两个输入框的绑定数据，通过 reactive 创建响应式对象。
fullName 是一个计算属性，它根据 firstName 和 lastName 的变化动态计算并返回值。
message 通过 watch 监听，当其值发生变化时打印出变化前后的值。

总结

在 Vue 3 中，Composition API 提供了灵活且强大的方式来管理组件的状态，主要通过以下几个 API：

reactive：用于创建响应式对象，适用于对象类型的状态。
ref：用于创建响应式的基本数据类型，适用于字符串、数字、布尔值等。
computed：用于创建计算属性，可以基于响应式数据计算新的值。
watch：用于监听响应式数据的变化并执行副作用操作。

通过这些 API，Vue 3 的状态管理更加灵活、清晰，并且能让你更方便地实现响应式数据的处理和计算属性的更新。

到此这篇关于Vue 3 中如何使用 Composition API 管理组件状态？的文章就介绍到这了,更多相关Vue 3 Composition API内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！