在 Vue2 中如果我需要請求一份數(shù)據(jù)竭讳，并且在loading和error時都展示對應的視圖，一般來說创肥，我們會這樣寫：
<template>
<div>
<div v-if="error">failed to load</div>
<div v-else-if="loading">loading...</div>
<div v-else>hello {{fullName}}!</div>
</div>
</template>
<script>
import { createComponent, computed } from 'vue'
export default {
data() {
// 集中式的data定義 如果有其他邏輯相關的數(shù)據(jù)就很容易混亂
return {
data: {
firstName: '',
lastName: ''
},
loading: false,
error: false,
},
},
async created() {
try {
// 管理loading
this.loading = true
// 取數(shù)據(jù)
const data = await this.$axios('/api/user')
this.data = data
} catch (e) {
// 管理error
this.error = true
} finally {
// 管理loading
this.loading = false
}
},
computed() {
// 沒人知道這個fullName和哪一部分的異步請求有關 和哪一部分的data有關 除非仔細閱讀
// 在組件大了以后更是如此
fullName() {
return this.data.firstName + this.data.lastName
}
}
}
</script>
這段代碼，怎么樣都談不上優(yōu)雅值朋，湊合的把功能完成而已叹侄，并且對于loading、error等處理的可復用性為零昨登。
數(shù)據(jù)和邏輯也被分散在了各個option中趾代，這還只是一個邏輯，如果又多了一些邏輯丰辣，多了data撒强、computed、methods笙什？你如何迅速的分辨清楚這個method是和某兩個data中的字段關聯(lián)起來的飘哨？
讓我們把這段代碼的邏輯照搬到 Vue3 中，
看一下swr在 Vue3 中的表現(xiàn)：
<template>
<div>
<div v-if="error">failed to load</div>
<div v-else-if="loading">loading...</div>
<div v-else>hello {{fullName}}!</div>
</div>
</template>
<script>
import { createComponent, computed } from 'vue'
import useSWR from 'vue-swr'
export default createComponent({
setup() {
// useSWR幫你管理好了取數(shù)琐凭、緩存芽隆、甚至標簽頁聚焦重新請求、甚至Suspense...
const { data, loading, error } = useSWR('/api/user', fetcher)
// 輕松的定義計算屬性
const fullName = computed(() => data.firstName + data.lastName)
return { data, fullName, loading, error }
}
})
</script>
就是這么簡單统屈，邏輯更加聚合了胚吁。
順嘴一提， use-swr 的威力可遠遠不止看到的這么簡單愁憔，隨便舉幾個它的能力：
