1、什么是組合式API

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

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

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是一個(gè)用于標(biāo)識(shí)和引用資源的機(jī)制。它可以用來指定要操作的特定資源，也可以用來表示資源的關(guān)系和層次結(jié)構(gòu)。在詳細(xì)理解上，可以從以下幾個(gè)方面來解釋：

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

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

4、reactive

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

具體來說，組合式API的reactive特性可以從以下幾個(gè)方面進(jìn)行詳細(xì)理解：

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

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

5、shallowRef, shallowReactive

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

6、toRaw

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

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

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

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

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

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

7、markRaw

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

8、toRef

toRef 是對(duì)定義的響應(yīng)對(duì)象的某個(gè)屬性進(jìn)行引用

    <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對(duì)象中取出name屬性, 并加上響應(yīng)式
     *
     * 返回的nameRef 的 value屬性的值 就是 name的值
     */
    const nameRef = toRef(info, "name");

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

9、toRefs

遍歷對(duì)象中的所有屬性，將其變成響應(yīng)式數(shù)據(jù)，這是因?yàn)?toRef 只能傳一個(gè) key,toRefs 所達(dá)到的效果 與 toRef 一樣

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

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

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

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

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

最新評(píng)論