1、什么是組合式API

Vue 3中引入了組合式API，它是一種新的代碼組織方式，旨在讓開發(fā)者更靈活地組織和重用Vue組件的邏輯。通過組合式API，開發(fā)者可以將相關的代碼邏輯組合在一起，而不是按照選項屬性或生命周期函數(shù)的方式來組織代碼。這樣可以更好地封裝和重用邏輯，使得組件更易于維護和理解。

組合式API的核心是setup函數(shù)，它替代了Vue 2中的data、computed、methods等選項，用于設置組件的初始狀態(tài)、計算屬性、方法等。在setup函數(shù)內(nèi)部，可以使用諸如ref、reactive等新的函數(shù)來定義響應式數(shù)據(jù)，以及使用watch、computed等函數(shù)來定義響應式的副作用和計算屬性。

2、基本使用

    <template>
        <h1>App 組件 --- {{ num }}</h1>
        <button @click="addNum">數(shù)據(jù)自增</button>
    </template>

    <script setup>
    import { ref } from 'vue'
    const num = ref(100)
    function addNum() {
        num.value++
    }
    </script>

3、ref

組合式API中的ref是一個用于標識和引用資源的機制。它可以用來指定要操作的特定資源，也可以用來表示資源的關系和層次結構。在詳細理解上，可以從以下幾個方面來解釋：

• 唯一標識符：ref是一個唯一標識符，用于在組合式API中準確定位資源。它可以是資源的ID、路徑或者其他形式的標識符，確保每個資源都有一個獨一無二的引用。
• 資源定位：通過ref，可以指定要操作的具體資源，例如某個特定的文檔、數(shù)據(jù)集合或者API端點。這樣可以確保API請求針對正確的資源進行處理。
• 嵌套關系：ref還可以表示資源之間的嵌套關系或者層次結構。例如，可以使用ref來表示文檔所屬的集合，或者表示父子文檔之間的關系。
• 引用傳遞：在組合式API中，ref還可以作為參數(shù)傳遞給其他API請求，用于表示資源之間的關聯(lián)。這樣可以實現(xiàn)跨資源的操作和查詢。

總之，ref在組合式API中扮演著非常重要的角色，它是確保API請求準確、精確地定位和操作資源的關鍵。對ref的詳細理解有助于正確構建和使用組合式API請求，從而實現(xiàn)對資源的有效管理和操作。

4、reactive

組合式API中的reactive指的是API的響應式特性。這意味著當?shù)讓訑?shù)據(jù)發(fā)生變化時，API將自動更新并通知相關的訂閱者。這種響應式特性使得組合式API能夠?qū)崿F(xiàn)實時數(shù)據(jù)更新和自動同步，從而提供了更加靈活和高效的數(shù)據(jù)交互方式。

具體來說，組合式API的reactive特性可以從以下幾個方面進行詳細理解：

• 數(shù)據(jù)響應：當?shù)讓訑?shù)據(jù)發(fā)生變化時，reactive API能夠自動感知并更新相關的數(shù)據(jù)。這意味著無需手動輪詢或者刷新數(shù)據(jù)，API將會自動將最新的數(shù)據(jù)推送給訂閱者。
• 實時更新：reactive API支持實時數(shù)據(jù)更新，這意味著當數(shù)據(jù)發(fā)生變化時，相關的訂閱者會立即收到更新的通知。這種實時性能夠滿足對于實時數(shù)據(jù)交互的需求。
• 響應式查詢：通過reactive API可以進行響應式查詢，即當查詢條件滿足時，API會自動推送相應的數(shù)據(jù)變化。這種特性能夠?qū)崿F(xiàn)類似于數(shù)據(jù)庫訂閱的功能，對于實時數(shù)據(jù)查詢和展示非常有用。
• 訂閱機制：reactive API通常會提供訂閱機制，讓客戶端能夠注冊對某個數(shù)據(jù)源的訂閱，一旦數(shù)據(jù)發(fā)生變化就能夠得到通知。這種機制使得數(shù)據(jù)交互更加靈活和高效。

總之，組合式API的reactive特性使得數(shù)據(jù)交互變得更加實時、高效和靈活，能夠滿足現(xiàn)代應用對于實時數(shù)據(jù)交互的需求。對reactive的詳細理解有助于充分發(fā)揮組合式API的優(yōu)勢，并構建出更加響應式和高效的應用程序。 總的來說，組合式API提供了一種更靈活、更可組合、更易于測試和重用的方式來組織Vue組件的邏輯。

5、shallowRef, shallowReactive

可以幫助我們創(chuàng)建一個響應式數(shù)據(jù)，但是只有第一層數(shù)據(jù)有響應式，深層數(shù)據(jù)沒有響應式，除此之外，用法和 ref/reactive 完全相同

6、toRaw

有些時候我們不希望數(shù)據(jù)進行響應式實時更新，可以通過 toRaw 獲取 ref 或 reactive 引用的原始數(shù)據(jù)，通過修改原始數(shù)據(jù)，不會造成頁面的更新，只有通過修改 ref 和 reactive 包裝后的數(shù)據(jù)時才發(fā)生界面響應式變化

    <template>
        <div>
            <button @click="update">+1</button>
            {{ info.name }}
            <button @click="rawUpdate">取消響應式修改</button>
        </div>
    </template>
    <script setup>
    import { reactive, toRaw } from "vue";

    const info = reactive({
        name: "張三",
    });

    const update = () => {
        info.name = info.name + 1;
    };

    const rawUpdate = () => {
        /**
         * 取消響應式
         * 注意：toRaw 只能用作引用數(shù)據(jù)類型
         */
        const a = toRaw(info);

        // 后續(xù)修改失去作用
        a.name = "李四";
    };
    </script>

7、markRaw

markRaw 包裝后的數(shù)據(jù)永遠不會被追蹤，在開發(fā)中不會使用

8、toRef

toRef 是對定義的響應對象的某個屬性進行引用

    <template>
        <div>
            {{ info.name }} --- {{ info.age }}
            <button @click="updateName">修改名字</button>
        </div>
    </template>
    <script setup>
    import { ref, toRef } from "vue";

    const info = {
        name: "張三",
        age: 18,
    };
    /**
     * 從info對象中取出name屬性, 并加上響應式
     *
     * 返回的nameRef 的 value屬性的值 就是 name的值
     */
    const nameRef = toRef(info, "name");

    const updateName = () => {
        // 把name改成李四
        nameRef.value = "李四";
    };
    </script>

9、toRefs

遍歷對象中的所有屬性，將其變成響應式數(shù)據(jù)，這是因為 toRef 只能傳一個 key,toRefs 所達到的效果 與 toRef 一樣

    const state = reactive({
        foo: 1,
        bar: 2,
    });

    const stateAsRefs = toRefs(state);
    /*
        stateAsRefs 的類型：{
            foo: Ref<number>,
            bar: Ref<number>
        }
    */

    // 這個 ref 和源屬性已經(jīng)“鏈接上了”
    state.foo++;
    console.log(stateAsRefs.foo.value); // 2

    stateAsRefs.foo.value++;
    console.log(state.foo); // 3

以上就是深入探究Vue中探究組合式API的奧秘的詳細內(nèi)容，更多關于Vue 組合式API的資料請關注腳本之家其它相關文章！

最新評論