vue組合式API淺顯入門示例詳解

Posted on by

正文

在react推出瞭hook之後，vue也在vue3裡面添加瞭組合式API，鑒於這個時間間隔，我有理由認為組合式api和hook還是有一些關系的。不過在我具體的使用中，我並沒發現這兩個方法太多的相同點，不過鑒於vue自動發佈之後就與react之間那剪不斷理還亂的量子力學關系，估計會有很多人會問及這倆之間的異同。我還沒到能分辨出異同的地步，就簡單的介紹一下vue的組合式API吧。

組合式API

在vue3.0發佈的時候，組合式API也隨著發佈會進入到大眾的視野。官網把原來的使用方式命名為選項式API，同時官網也明確表示選項式API是由組合式API所實現的，所以大概後面vue的主推方向應該就是組合式API瞭。

我學習框架的方法是從語法到詞法，再到運行狀態。那麼先從語法開始學習，照舊還是以官網為例。

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

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

先聲明一下，這個不是vue3.0版本的組合式API寫法，是vue3.2版本發佈時的語法糖，但是也是我個人建議使用的方法，畢竟不推薦的話也不會出這個語法糖。3.0版本的寫法有些繁瑣，但是大致上大差不差。

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

這個是最初的組合式API的寫法，比起新版的語法糖隻是多瞭一個setup和需要將變量return出來，而這個setup就是我認為的組合式API的核心。

setup

最初的響應式API以 setup 函數作為入口函數， setup函數必須返回兩種類型的值：第一是對象，第二是函數。

當 setup 函數返回對象時，對象中的數據或方法可以在 template中被使用，也就相當於data函數裡面的變量。當 setup函數返回函數時，函數會被作為 render 函數。

不過可預見的是當頁面數據量變大的時候，setup函數會變得巨大，而且return的內容也會膨脹，所以vue3.2的語法糖省略瞭setup函數的包裹，而是直接將setup放到script裡面，裡面的代碼就等同於放到瞭setup函數中，而且還省略瞭return的步驟。雖然沒有寫出setup函數，但是這段代碼的本質就是setup函數的執行。

變量聲明

setup函數執行之後，裡面的變量會被直接暴露給組件，由組件使用。就以最上面的代碼一中的count為例，count被聲明之後就可以放到template裡面，還可以被increment函數修改後在頁面中更新，這個就是靠ref方法，但是說ref之前先要說一下組合式API生命對象的方法reactive。

代碼二中的state就是reactive方法聲明的對象，reactive和ref一樣，都是用來聲明變量的，隻有通過這兩個方法聲明後的變量才能做到響應式更新。這裡其實是vue為瞭讓用戶簡單而導致的復雜，具體說比較復雜，我就簡單說說吧。

vue3依然是響應式的架構，通過對聲明的變量監聽從而收集到變量的修改事件，已達到響應式更新的功能。對vue3有一些瞭解的用戶都知道，vue3用的是proxy，但是proxy隻能做到對對象代理，如果使用瞭原始類型，像是string，number之類的就沒有辦法瞭，所以vue3為瞭監聽原始類型的數據，使用ref去聲明原始類型，從而將原始類型變成對象，看起來通過ref聲明後的依然是原始類型，實際上我們修改的是這個變量的value的值，而不是這個對象的值。

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

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

當 ref 在模板中作為頂層屬性被訪問時，它們會被自動“解包”，所以不需要使用 .value。所以代碼一中，template中的count不需要寫作count.value。

說回組合式API，變量修改之後，組合式API和選項式API一樣，是無法做到立刻將顯示更新的，所以想要獲取到變量修改後的頁面元素就需要nextTick，用法和vue的nextTick是一樣的，就不多贅述瞭。

目前比起選項式API的優點

從代碼一和代碼二中可以看出，組合式API裡面不需要將變量放到data裡面，函數放到method裡面，這樣的話可以讓有相關性的變量和函數放到一起。開發選項式API的時候當頁面數據量大的時候在method寫函數的時候忘記瞭變量名稱，就需要滑到data裡面看一下，然後在滑回method繼續寫函數。組合式API不能說完全避免，但是能大大減少這種情況的出現。

生命周期

生命周期官網圖片還是挺全的，基本上和選項式API差不多，就是改改名字，去掉瞭create，改用setup。

Vue2.x Vue3
beforeCreate setup
created
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted

從這篇文章中找到瞭一個對比的列表，大體上是可以一一對應的。生命周期的邏輯我就不多贅述瞭，由於用法不同，所以這裡我就根據代碼一放一個錯誤的例子。

setTimeout(() => { 
    onMounted(() => { 
        // 異步註冊時當前組件實例已丟失 
        // 這將不會正常工作 }) 
     }, 100
 )

生命周期可以放到函數裡面，然後在setup裡面調用，但是不能放到異步函數裡面。

大體上回瞭這些就可以開始開發項目瞭，至於計算屬性，監聽器之類的，那都是後面的事情，這隻是入門文章，過於入門瞭，所以並不建議熟練掌握的閱讀此文。

以上就是vue組合式API淺顯入門示例詳解的詳細內容，更多關於vue組合式API入門的資料請關註WalkonNet其它相關文章！

推薦閱讀：