快捷導(dǎo)航

Vue3中使用Composition API管理組件狀態(tài)

更新時間：2025年08月12日 09:58:52 作者：wangfang呀

Vue3的CompositionAPI通過reactive、ref、computed、watch等函數(shù),實現(xiàn)更靈活、可組合的狀態(tài)管理,提升邏輯復(fù)用與類型推導(dǎo)效率,x下面就來介紹一下如何使用

前言

在 Vue 3 中，Composition API 提供了一種新的組織和管理組件狀態(tài)的方式。它通過一組函數(shù)（如 reactive、ref、computed、watch）使得組件的狀態(tài)管理更加靈活和可組合，相比于 Vue 2 的 Options API，Composition API 使得邏輯復(fù)用和類型推導(dǎo)更加高效。

Composition API 主要是基于函數(shù)的，它讓我們在組件中以更細(xì)粒度的方式管理狀態(tài)、計算屬性和副作用。

本文將介紹如何在 Vue 3 中使用 Composition API 來管理組件的狀態(tài)，涵蓋以下內(nèi)容：

Composition API 狀態(tài)管理：如何使用 Composition API 管理狀態(tài)。
reactive 與 ref：使用 reactive 和 ref 管理響應(yīng)式狀態(tài)。
computed 與 watch：如何使用 computed 計算屬性和 watch 監(jiān)聽狀態(tài)變化。
代碼示例：展示如何在 Vue 3 中使用 Composition API 管理組件狀態(tài)。

概述：Composition API 狀態(tài)管理

在 Vue 3 中，Composition API 通過以下幾個主要的功能來管理組件狀態(tài)：

reactive：用于創(chuàng)建響應(yīng)式對象。
ref：用于創(chuàng)建響應(yīng)式的基本數(shù)據(jù)類型（如字符串、數(shù)字、布爾值等）。
computed：用于創(chuàng)建基于響應(yīng)式狀態(tài)計算得出的值，類似于 Vue 2 中的計算屬性。
watch：用于監(jiān)聽響應(yīng)式數(shù)據(jù)的變化并執(zhí)行副作用操作，類似于 Vue 2 中的 watch。

通過這些 API，我們可以在 Vue 3 中靈活地管理組件的狀態(tài)和行為。

reactive與ref

reactive：用于創(chuàng)建響應(yīng)式對象，通常用于管理對象類型的狀態(tài)。它會遞歸地將對象的屬性變?yōu)轫憫?yīng)式。
ref：用于創(chuàng)建響應(yīng)式的基本數(shù)據(jù)類型，如字符串、數(shù)字、布爾值等。ref 也可以用來創(chuàng)建對對象的引用，便于使用響應(yīng)式狀態(tài)。

1. 使用reactive管理對象狀態(tài)

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

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

export default {
  setup() {
    // 使用 reactive 創(chuàng)建響應(yīng)式對象
    const state = reactive({
      counter: 0
    });

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

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

在這個例子中，使用 reactive 創(chuàng)建了一個包含 counter 屬性的響應(yīng)式對象。當(dāng) counter 改變時，視圖會自動更新。

2. 使用ref管理基本數(shù)據(jù)類型的狀態(tài)

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

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

export default {
  setup() {
    // 使用 ref 創(chuàng)建響應(yīng)式的基本數(shù)據(jù)類型
    const counter = ref(0);

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

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

在這個例子中，使用 ref 創(chuàng)建了一個響應(yīng)式的數(shù)字 counter，通過 .value 來訪問和修改它的值。當(dāng) counter.value 改變時，視圖會自動更新。

computed與watch

computed：用于創(chuàng)建計算屬性，計算屬性的值是基于響應(yīng)式數(shù)據(jù)的計算結(jié)果，當(dāng)相關(guān)數(shù)據(jù)變化時，計算屬性會重新計算。
watch：用于監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，并執(zhí)行副作用操作。watch 可以監(jiān)聽單一的響應(yīng)式變量或多個響應(yīng)式數(shù)據(jù)的變化。

1. 使用computed創(chuàng)建計算屬性

<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 創(chuàng)建計算屬性
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

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

在這個例子中，fullName 是一個計算屬性，它會自動基于 firstName 和 lastName 的變化來更新。當(dāng)用戶在輸入框中輸入名字時，fullName 會實時更新。

2. 使用watch監(jiān)聽響應(yīng)式數(shù)據(jù)的變化

<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 監(jiān)聽 counter 的變化
    watch(counter, (newValue, oldValue) => {
      console.log(`Counter changed from ${oldValue} to ${newValue}`);
    });

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

在這個例子中，watch 用于監(jiān)聽 counter 的變化，并打印出變化前后的值。當(dāng) counter 發(fā)生變化時，watch 會執(zhí)行相應(yīng)的回調(diào)函數(shù)。

代碼示例：使用 Composition API 管理組件狀態(tài)

以下是一個完整的 Vue 3 示例，演示了如何使用 Composition API 來管理組件的狀態(tài)，結(jié)合 reactive、ref、computed 和 watch 來實現(xiàn)響應(yīng)式數(shù)據(jù)和計算屬性的功能。

<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 管理基本數(shù)據(jù)類型
    const counter = ref(0);
    const increment = () => counter.value++;

    // 使用 reactive 管理對象狀態(tài)
    const firstName = ref('');
    const lastName = ref('');
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    // 使用 watch 監(jiān)聽數(shù)據(jù)變化
    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 是一個基本的響應(yīng)式數(shù)字，通過 ref 來管理。
firstName 和 lastName 是兩個輸入框的綁定數(shù)據(jù)，通過 reactive 創(chuàng)建響應(yīng)式對象。
fullName 是一個計算屬性，它根據(jù) firstName 和 lastName 的變化動態(tài)計算并返回值。
message 通過 watch 監(jiān)聽，當(dāng)其值發(fā)生變化時打印出變化前后的值。