首页 > 其他分享> 文章详细

vue和react给我的感受

2021-12-14 23:02:03 阅读：200 来源： 互联网

标签：vue 感受 react loading error fullName data

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

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

　　我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

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

标签：vue,感受,react,loading,error,fullName,data
来源： https://www.cnblogs.com/520BigBear/p/15690458.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue和react给我的感受