正文

在react推出了hook之后，vue也在vue3里面添加了組合式API，鑒于這個(gè)時(shí)間間隔，我有理由認(rèn)為組合式api和hook還是有一些關(guān)系的。不過(guò)在我具體的使用中，我并沒發(fā)現(xiàn)這兩個(gè)方法太多的相同點(diǎn)，不過(guò)鑒于vue自動(dòng)發(fā)布之后就與react之間那剪不斷理還亂的量子力學(xué)關(guān)系，估計(jì)會(huì)有很多人會(huì)問(wèn)及這倆之間的異同。我還沒到能分辨出異同的地步，就簡(jiǎn)單的介紹一下vue的組合式API吧。

組合式API

在vue3.0發(fā)布的時(shí)候，組合式API也隨著發(fā)布會(huì)進(jìn)入到大眾的視野。官網(wǎng)把原來(lái)的使用方式命名為選項(xiàng)式API，同時(shí)官網(wǎng)也明確表示選項(xiàng)式API是由組合式API所實(shí)現(xiàn)的，所以大概后面vue的主推方向應(yīng)該就是組合式API了。

我學(xué)習(xí)框架的方法是從語(yǔ)法到詞法，再到運(yùn)行狀態(tài)。那么先從語(yǔ)法開始學(xué)習(xí)，照舊還是以官網(wǎng)為例。

//代碼一
<script setup> 
    import { ref, onMounted } from 'vue' 
    // 響應(yīng)式狀態(tài) 
    const count = ref(0) 
    // 用來(lái)修改狀態(tài)、觸發(fā)更新的函數(shù) 
    function increment() { 
        count.value++ 
    }
    // 生命周期鉤子 
    onMounted(() => { 
        console.log(`The initial count is ${count.value}.`)
    })
</script>
<template>
    <button @click="increment">Count is: {{ count }}</button> 
</template>

可以看出，組合式API和原來(lái)的選項(xiàng)式API還是有差別的，原來(lái)的選項(xiàng)式API可以直接使用生命周期，變量聲明之類的內(nèi)置方法，組合式API則需要先引入再使用。

先聲明一下，這個(gè)不是vue3.0版本的組合式API寫法，是vue3.2版本發(fā)布時(shí)的語(yǔ)法糖，但是也是我個(gè)人建議使用的方法，畢竟不推薦的話也不會(huì)出這個(gè)語(yǔ)法糖。3.0版本的寫法有些繁瑣，但是大致上大差不差。

//代碼二
import { reactive } from 'vue' 
export default {
    // `setup` 是一個(gè)專門用于組合式 API 的特殊鉤子函數(shù) 
    setup() { 
        const state = reactive({ count: 0 })
        // 暴露 state 到模板
        return { state }
    }
}

這個(gè)是最初的組合式API的寫法，比起新版的語(yǔ)法糖只是多了一個(gè)setup和需要將變量return出來(lái)，而這個(gè)setup就是我認(rèn)為的組合式API的核心。

setup

最初的響應(yīng)式API以 setup 函數(shù)作為入口函數(shù)， setup函數(shù)必須返回兩種類型的值：第一是對(duì)象，第二是函數(shù)。

當(dāng) setup 函數(shù)返回對(duì)象時(shí)，對(duì)象中的數(shù)據(jù)或方法可以在 template中被使用，也就相當(dāng)于data函數(shù)里面的變量。當(dāng) setup函數(shù)返回函數(shù)時(shí)，函數(shù)會(huì)被作為 render 函數(shù)。

不過(guò)可預(yù)見的是當(dāng)頁(yè)面數(shù)據(jù)量變大的時(shí)候，setup函數(shù)會(huì)變得巨大，而且return的內(nèi)容也會(huì)膨脹，所以vue3.2的語(yǔ)法糖省略了setup函數(shù)的包裹，而是直接將setup放到script里面，里面的代碼就等同于放到了setup函數(shù)中，而且還省略了return的步驟。雖然沒有寫出setup函數(shù)，但是這段代碼的本質(zhì)就是setup函數(shù)的執(zhí)行。

變量聲明

setup函數(shù)執(zhí)行之后，里面的變量會(huì)被直接暴露給組件，由組件使用。就以最上面的代碼一中的count為例，count被聲明之后就可以放到template里面，還可以被increment函數(shù)修改后在頁(yè)面中更新，這個(gè)就是靠ref方法，但是說(shuō)ref之前先要說(shuō)一下組合式API生命對(duì)象的方法reactive。

代碼二中的state就是reactive方法聲明的對(duì)象，reactive和ref一樣，都是用來(lái)聲明變量的，只有通過(guò)這兩個(gè)方法聲明后的變量才能做到響應(yīng)式更新。這里其實(shí)是vue為了讓用戶簡(jiǎn)單而導(dǎo)致的復(fù)雜，具體說(shuō)比較復(fù)雜，我就簡(jiǎn)單說(shuō)說(shuō)吧。

vue3依然是響應(yīng)式的架構(gòu)，通過(guò)對(duì)聲明的變量監(jiān)聽從而收集到變量的修改事件，已達(dá)到響應(yīng)式更新的功能。對(duì)vue3有一些了解的用戶都知道，vue3用的是proxy，但是proxy只能做到對(duì)對(duì)象代理，如果使用了原始類型，像是string，number之類的就沒有辦法了，所以vue3為了監(jiān)聽原始類型的數(shù)據(jù)，使用ref去聲明原始類型，從而將原始類型變成對(duì)象，看起來(lái)通過(guò)ref聲明后的依然是原始類型，實(shí)際上我們修改的是這個(gè)變量的value的值，而不是這個(gè)對(duì)象的值。

組合式API還有一點(diǎn)就是無(wú)法直接修改聲明的變量值。以代碼一為例，無(wú)論是count = 3還是count=ref(3)都會(huì)導(dǎo)致顯示無(wú)法更新。同樣的，代碼二中的state的修改也不可以直接通過(guò)state=reactive({a:23})或者state = {a:23}的方式修改。

雖說(shuō)ref也可以用來(lái)生命對(duì)象，不過(guò)還是不太建議，畢竟還是按照文檔的方式去寫才能做到最方便的維護(hù)，畢竟比維護(hù)別人的爛代碼更難受的就是維護(hù)自己的爛代碼。

當(dāng) ref 在模板中作為頂層屬性被訪問(wèn)時(shí)，它們會(huì)被自動(dòng)“解包”，所以不需要使用 .value。所以代碼一中，template中的count不需要寫作count.value。

說(shuō)回組合式API，變量修改之后，組合式API和選項(xiàng)式API一樣，是無(wú)法做到立刻將顯示更新的，所以想要獲取到變量修改后的頁(yè)面元素就需要nextTick，用法和vue的nextTick是一樣的，就不多贅述了。

目前比起選項(xiàng)式API的優(yōu)點(diǎn)

從代碼一和代碼二中可以看出，組合式API里面不需要將變量放到data里面，函數(shù)放到method里面，這樣的話可以讓有相關(guān)性的變量和函數(shù)放到一起。開發(fā)選項(xiàng)式API的時(shí)候當(dāng)頁(yè)面數(shù)據(jù)量大的時(shí)候在method寫函數(shù)的時(shí)候忘記了變量名稱，就需要滑到data里面看一下，然后在滑回method繼續(xù)寫函數(shù)。組合式API不能說(shuō)完全避免，但是能大大減少這種情況的出現(xiàn)。

生命周期

生命周期官網(wǎng)圖片還是挺全的，基本上和選項(xiàng)式API差不多，就是改改名字，去掉了create，改用setup。

從這篇文章中找到了一個(gè)對(duì)比的列表，大體上是可以一一對(duì)應(yīng)的。生命周期的邏輯我就不多贅述了，由于用法不同，所以這里我就根據(jù)代碼一放一個(gè)錯(cuò)誤的例子。

setTimeout(() => { 
    onMounted(() => { 
        // 異步注冊(cè)時(shí)當(dāng)前組件實(shí)例已丟失 
        // 這將不會(huì)正常工作 }) 
     }, 100
 )

生命周期可以放到函數(shù)里面，然后在setup里面調(diào)用，但是不能放到異步函數(shù)里面。

大體上回了這些就可以開始開發(fā)項(xiàng)目了，至于計(jì)算屬性，監(jiān)聽器之類的，那都是后面的事情，這只是入門文章，過(guò)于入門了，所以并不建議熟練掌握的閱讀此文。

以上就是vue組合式API淺顯入門示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue組合式API入門的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論