鱈魚的魚缸搬家了!新家文章有重新修訂,歡迎來新家看看喔。(´▽`ʃ♡ƪ)
大家好,我是鱈魚。(。・∀・)ノ゙
最近看到大家討論取得 API 時機,有許多人都提到「一定要」或者「習慣」,在 onMounted 這個 hook 內呼叫 API 取得資料。
其實這也沒不好,但是也沒什麼好處就是了。(。・ω・。)
讓我們來思考一下下,有關於 Vue 取得 API 資料這檔事。(不會轉生,也沒有史萊姆)
有人說「一定要」是因為不這麼做會壞掉,這個可以從 2 個部分來看。
首先是 onMounted 這個 hook 是甚麼?讓我們看看官網的定義:
Registers a callback to be called after the component has been mounted.
意思就是「註冊一個會在元件安裝完成後被呼叫的 callback」。
甚麼意思呢?也就是他和有沒有資料一點關係都沒有。換句話說 onMounted 沒辦法幫你保證有資料、template 不會壞,從此天下太平,再也不用加班,。(´。_。`)
所以就牽扯到了第二部分:為甚麼會壞掉?
馬上取會壞,onMounted 取就不會壞,這表示你的資料可能和 DOM 或元件發生耦合,這其實不是好現象,不但違反了資料驅動的概念還埋了隱形的翅膀…地雷。
具體原因可能如下:
所以總結來說,所謂的「壞掉」很有可能只是資料流沒考慮 undefined 的情境。
(可能啦,我巫力不足,只能通靈到這裡惹。 ╮(╯▽╰)╭)
如果有使用 TypeScript 就很少會出現這類問題了,因為 TypeScript 會先不開心、滿江紅給你看。ᕦ(ò_óˇ)ᕤ
習慣上可能會這樣寫:
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getUser, User } from './api'
const user = ref<User>();
onMounted(async () => {
try {
user.value = await getUser();
} catch (error) {
console.error('QQ');
}
});
</script>
<template>
<h1>Classic</h1>
<div>
user: {{ user?.name }}
</div>
</template>
考慮讀取狀態則可能再加個 loading:
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getUser, User } from './api'
const user = ref<User>();
const isLoading = ref(false);
onMounted(async () => {
try {
isLoading.value = true;
user.value = await getUser();
} catch (error) {
console.error('QQ');
} finally {
isLoading.value = false;
}
});
</script>
<template>
<h1>Classic</h1>
<div v-if="isLoading">
資料讀取中...(~﹃~)~zZ
</div>
<div v-else>
user: {{ user?.name }}
</div>
</template>
剛剛說了,其實不用在 onMounted 才取資料,早一點取也行,所以可以變成這樣:
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getUser, User } from './api'
const user = ref<User>();
const isLoading = ref(true);
getUser().then((data) => {
user.value = data;
}).catch(() => {
console.error('QQ');
}).finally(() => {
isLoading.value = false;
});
</script>
...
路人:「這樣真的有比較好嗎?」
鱈魚:「當然沒有。(≧∇≦)ノ」
路人:(抄起球棒)
鱈魚:「冷靜冷靜,還沒說完啊。(っ °Д °;)っ」
讓我們回想一下 Vue 3 的 Composition API 精神,一但要取得資料變多後,仔細觀察可以發現「資料、狀態(isLoading)、取資料的 function」會重複出現。
讓我們抽離、重組一下,新增一個檔案。
import { ref } from 'vue';
interface UseAsyncDataParam<Data> {
executor: () => Promise<Data>;
onError?: (error: unknown) => void;
}
export function useAsyncData<Data>(param: UseAsyncDataParam<Data>) {
const data = ref<Data>();
const isLoading = ref(true);
param.executor().then((result) => {
data.value = result;
}).catch((error) => {
param.onError?.(error);
}).finally(() => {
isLoading.value = false;
});
return {
data,
isLoading,
execute: param.executor,
}
}
(寫過 Nuxt 的朋友們一定會有熟悉的感覺。(. ❛ ᴗ ❛.))
現在讓我們用這個 useAsyncData 改寫一下剛剛的例子看看。
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getUser, User } from './api'
import { useAsyncData } from './useAsyncData'
const {
data: user,
isLoading,
} = useAsyncData({
executor: () => getUser(),
onError() {
console.error('QQ');
},
});
</script>
<template>
<h1>Composable</h1>
<div v-if="isLoading">
資料讀取中...(~﹃~)~zZ
</div>
<div v-else>
user: {{ user?.name }}
</div>
</template>
就算有多個狀態要取得也變得更好組織程式碼了,是不是看起來乾淨許多呢?
恭喜我們重複造了 Nuxt 的 useAsyncData 與 VueUse 的 useAsyncState 的輪子了!
★,°:.ヽ(✿゚▽゚)ノ$:.°★
沒錯,雖然目前這個 useAsyncData 的功能很簡陋,有很多需要改進的部分,但是這就是上述兩個 API 的基礎精神。
不過 Nuxt 還包含了 SSR 行為,所以更加複雜,推薦大家可以看看 VueUse useAsyncState 的文件或原始碼,一定可以獲益良多。
文章到此結束了,感謝您的閱讀,以上範例程式碼可以在此取得。
有其他想法請不吝告訴我,鱈魚感謝您!(o゜▽゜)o☆