vue和react给我的感受
以下纯属个人使用两个框架的感想和体会:
不知道你们是否有这种感觉~
我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给我的感受的更多相关文章
- 前端-关于 Vue 和 React 区别的一些笔记
监听数据变化的实现原理不同 1.Vue 通过 getter/setter 以及一些函数的劫持,能精确知道数据变化,不需要特别的优化就能达到很好的性能 2.React 默认是通过比较引用的方式进行的,如 ...
- 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo
前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...
- vue入门 vue与react和Angular的关系和区别
一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...
- Vue和React对比
Vue和React对比 Vue也已经升级到2.0版本了,到现在为止(2016/11/19)比较流行的MVVM框架有AngularJS(也有人认为其为MVC).ReactJS和VueJS,这三个框架中, ...
- vue 和 react 学习 异同点
vue 和 react 学习 异同点 本文不做两个框架比较,只对比了两个框架的语法对比,不代表任何观点,盗版必究,本人唯一qq:421217189 欢迎大家一起来学习探讨,壮我大前端(本文markdo ...
- VUE PK REACT(1)
一.浏览器兼容性 vue: ie9+ react: ie8+ 二.安装使用 vue:1.直接引入 <script src="https://cdn.jsdelivr.net/npm/ ...
- Vue-起步篇:Vue与React、 Angular的区别
毋庸置疑,Vue.React. Angular这三个是现在比较火的前端框架.这几个框架都各有所长,选择学习哪种就得看个人喜好或者实际项目了.相比之下, Vue 是轻量级且容易学习掌握的. 1.Vue和 ...
- Vue与React两个框架的区别对比
简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...
- vue和react的介绍
这几年前端框架发展的不错,出了不少框架,像微软自己的knockoutjs,angular,vue和最近比较火的react等,之前我有写过前两者的相关文章,今天主要说一下后两者. 介绍 是一个用于构建用 ...
随机推荐
- java 注释与标识符
JAVA基础 注释与标识符 注释 书写注释是一个非常好的习惯 三种注释: 单行,多行,文档 .单行 ://注释 .多行:/* 注释 / .文档** 注释 */ 标识符 1. 关键字 2.标识符注意点 ...
- tp6 验证方式
think验证方式
- php 23种设计模式 - 命令模式
命令模式 将一个请求封装为一个对象,从而使用户可用不同的请求对客户进行参数化.对请求排队或记录请求日志,以及支持撤销的操作. 命令模式以松散耦合主题为基础,发送消息.命令和请求,或通过一组处理程序发送 ...
- linux 系统 解决php -v查看到版本于phpinfo()打印的版本不一致问题
发现问题的原因: 安装zip扩展后,配置成功,但是使用gitlab合并的时候发生错误,经检查,使用phpinfo打印出来的php版本为7.1,而使用linux度服务器 运行 php -v的版本却是5. ...
- Java的jmap命令使用详解
jmap命令简介 jmap(Java Virtual Machine Memory Map)是JDK提供的一个可以生成Java虚拟机的堆转储快照dump文件的命令行工具.除此以外,jmap命令还可以查 ...
- linux下oracle数据库的启动
linux下oracle数据库的启动 一.切换oracle用户 命令:su - oracle 二.运行sqlplus命令,进入sqlplus环境 命令:sqlplus /nolog (nolog参数表 ...
- CSAPP-Lab05 Cache Lab 深入解析
本文首发于我的知乎专栏:https://zhuanlan.zhihu.com/p/484657229 实验概览 Cache Lab 分为两部分,编写一个高速缓存模拟器以及要求优化矩阵转置的核心函数,以 ...
- Java案例之评委打分
/* 案例:评委打分,六个或者更多个评委打分,去到一个最高分,一个最低分,求其他评委的平均值(当评委数量发生改变时不需要进行二次修改) 需求:定义一个数组,长度为6,循环获取输入的数据 定义方法获取数 ...
- Canvas将图片转换成base64形式展示的常见问题及解决方案
导航1:https://blog.csdn.net/weixin_30668887/article/details/98822699 导航2:https://stackoverflow.com/que ...
- Spring对DAO的支持?
Spring对数据访问对象(DAO)的支持旨在简化它和数据访问技术如JDBC,Hibernate or JDO 结合使用.这使我们可以方便切换持久层.编码时也不用担心会捕获每种技术特有的异常.