以下純屬個人使用兩個框架的感想和體會:

　　不知道你們是否有這種感覺~

　　我vue和react都用過一段時間，但是vue給我感覺就是經常會忘記語法，需要對照文件才知道怎麼寫( 難不成是我沒喝六個核桃的原因嗎? )，但是react卻很少需要查閱文件( 難不成是我react用的少? )。

　　可能是因為我vue2用的比較多,在之前的公司~

　　而vue3更趨向於react了( react: "你在模仿我?", vue撩了一下本就不多的秀髮, 臉部紅心不跳的說道:"去其糟粕取其精華嗎", react一臉黑線 )

　　　　1. vue3更好的typescript支援了

　　　　2. 搞階技巧Composition API ,有點React Hooks的味道了, 更好的邏輯複用,更好的型別推導

假如, 我只是說假如: 在vue2 中我需要請求一份資料，並且在loading和error時都展示對應的檢視:

<template>
    <div v-if="error">failed to load</div>
    <div v-else-if="loading">loading...</div>
    <div v-else>hello {{fullName}}!</div>
</template>
<script>
import { createComponent, computed } from 
 
'vue'
export default {
  data() {
    // 集中式的data定義 如果有其他邏輯相關的資料就很容易混亂
    return {
        data: {
            firstName: '',
            lastName: ''
        },
        loading: false,
        error: false,
    },
  },
  async created() {
      try {
        // 管理loading
        this.loading = true
        //
 
 取資料
        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>

不難看出程式碼其實不是特別優雅(排除我笨拙的雙手), 而且loading、error等處理的可複用性為零, 看起來比較散, 對, 一個字 散, 程式碼越多,邏輯越複雜 那就越明顯了, 而且很不好快速的分辨這個method是和哪兩個data中的欄位關聯起來的, 你們有這種感覺嗎 (我的錯覺?我昨晚喝大了?)

把swr的邏輯照搬到 Vue3 中:

<template>
    <div v-if="error">failed to load</div>
    <div v-else-if="loading">loading...</div>
    <div v-else>hello {{fullName}}!</div>
</template>
<script>
import { createComponent, computed } from 'vue'
import useSWR from 'vue-swr'
export default createComponent({
  setup() {
      // useSWR幫你管理好了取數、快取、甚至標籤頁聚焦重新請求、甚至Suspense...
      const { data, loading, error } = useSWR('/api/user', fetcher)
      // 輕鬆的定義計算屬性
      const fullName = computed(() => data.firstName + data.lastName)
      return { data, fullName, loading, error }
  }
})
</script>

這樣的話 邏輯更加聚合了,看起來也比較有凝聚力 , 欄位引數比較明瞭

好了,我也不多說了, 各有各的好處, 能躋身三大主流框架, 沒兩把刷子 那是不可能的, 你不瞭解他, 你就別評判他....我還是非常喜歡vue和react的

給新手的溫馨提示:

vue2 的方式就是 options API

不過 vue3 也支援這種寫法，同時又新增了 composition API

但是不建議大家在 vue3中 混合運用options API和composition API

來都來了, 看都看了, 留下點什麼唄~