vue和react给我的感受

2023-11-08 15:43:28

以下纯属个人使用两个框架的感想和体会:

　　不知道你们是否有这种感觉~

　　我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

来都来了, 看都看了, 留下点什么呗~

码农公寓

相关文章