zoukankan      html  css  js  c++  java
  • vue和react给我的感受

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

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

      我vue和react都用过一段时间,但是vue给我感觉就是经常会忘记语法,需要对照文档才知道怎么写( 难不成是我没喝六个核桃的原因吗? ),但是react却很少需要查阅文档( 难不成是我react用的少? )。

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

      而vue3更趋向于react了( react: "你在模仿我?",  vue撩了一下本就不多的秀发, 脸部红心不跳的说道:"去其糟粕取其精华吗", react一脸黑线 )

        1. vue3更好的typescript支持了

        2. 搞阶技巧Composition API ,有点React Hooks的味道了, 更好的逻辑复用,更好的类型推导

    假如, 我只是说假如:  在vue2 中我需要请求一份数据,并且在loadingerror时都展示对应的视图:

    <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>

    不难看出代码其实不是特别优雅(排除我笨拙的双手), 而且 loadingerror等处理的可复用性为零, 看起来比较散, 对, 一个字 散, 代码越多,逻辑越复杂 那就越明显了, 而且很不好快速的分辨这个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

     

     

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

    那时候我只有一台录音机也没有电脑 也不敢奢求说唱会让自己的生活变好
  • 相关阅读:
    微人事项目-mybatis-持久层
    通过外键连接多个表
    springioc
    Redis 消息中间件 ServiceStack.Redis 轻量级
    深度数据对接 链接服务器 数据传输
    sqlserver 抓取所有执行语句 SQL语句分析 死锁 抓取
    sqlserver 索引优化 CPU占用过高 执行分析 服务器检查
    sql server 远程备份 bak 删除
    冒泡排序
    多线程 异步 beginInvoke EndInvoke 使用
  • 原文地址:https://www.cnblogs.com/520BigBear/p/15690458.html
Copyright © 2011-2022 走看看