前言

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

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

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

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

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

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

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

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

reactive與ref

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

1. 使用reactive管理對(duì)象狀態(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)式對(duì)象
    const state = reactive({
      counter: 0
    });

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

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

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

2. 使用ref管理基本數(shù)據(jù)類(lèi)型的狀態(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ù)類(lèi)型
    const counter = ref(0);

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

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

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

computed與watch

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

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

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

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

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

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

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

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

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

以下是一個(gè)完整的 Vue 3 示例，演示了如何使用 Composition API 來(lái)管理組件的狀態(tài)，結(jié)合 reactive、ref、computed 和 watch 來(lái)實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)和計(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ù)類(lèi)型
    const counter = ref(0);
    const increment = () => counter.value++;

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

    // 使用 watch 監(jiān)聽(tīng)數(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>

在這個(gè)例子中：

• counter 是一個(gè)基本的響應(yīng)式數(shù)字，通過(guò) ref 來(lái)管理。
• firstName 和 lastName 是兩個(gè)輸入框的綁定數(shù)據(jù)，通過(guò) reactive 創(chuàng)建響應(yīng)式對(duì)象。
• fullName 是一個(gè)計(jì)算屬性，它根據(jù) firstName 和 lastName 的變化動(dòng)態(tài)計(jì)算并返回值。
• message 通過(guò) watch 監(jiān)聽(tīng)，當(dāng)其值發(fā)生變化時(shí)打印出變化前后的值。

總結(jié)

在 Vue 3 中，Composition API 提供了靈活且強(qiáng)大的方式來(lái)管理組件的狀態(tài)，主要通過(guò)以下幾個(gè) API：

• reactive：用于創(chuàng)建響應(yīng)式對(duì)象，適用于對(duì)象類(lèi)型的狀態(tài)。
• ref：用于創(chuàng)建響應(yīng)式的基本數(shù)據(jù)類(lèi)型，適用于字符串、數(shù)字、布爾值等。
• computed：用于創(chuàng)建計(jì)算屬性，可以基于響應(yīng)式數(shù)據(jù)計(jì)算新的值。
• watch：用于監(jiān)聽(tīng)響應(yīng)式數(shù)據(jù)的變化并執(zhí)行副作用操作。

通過(guò)這些 API，Vue 3 的狀態(tài)管理更加靈活、清晰，并且能讓你更方便地實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的處理和計(jì)算屬性的更新。

到此這篇關(guān)于Vue 3 中如何使用 Composition API 管理組件狀態(tài)？的文章就介紹到這了,更多相關(guān)Vue 3 Composition API內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論