React vs Vue in 2020
React vs Vue in 2020
技术选型
React
// UserProfile.jsx
function UserProfile({id, showAvatar, onFollowClick}: {
id: string,
showAvatar: boolean,
onFollowClick: () => void,
}) {
const [user, setUser] = React.useState(undefined);
React.useEffect(() => {
fetchUser(id).then(setUser);
}, [id]);
return (
<div>
<div>{id}</div>
{showAvatar ? <Avatar id={id} /> : null}
{user !== undefined ? <UserBody user={user} /> : null}
<button onClick={onFollowClick}>Follow</button>
</div>
);
}
Vue
// UserProfile.vue
<div>
<div>{{ id }}</div>
<Avatar v-if="showAvatar" :id="id" />
<UserBody v-if="user" :user="user" />
<button @click="$emit('follow-click')">Follow</button>
</div>
defineComponent({
props: {
id: { type: String },
showAvatar: { type: Boolean },
},
setup(props) {
const {id} = toRefs(props);
const user = ref(undefined);
function updateUser() {
fetchUser(id.value).then(data => {
user.value = data;
});
}
onMounted(updateUser);
watch(id, updateUser);
return {user};
}
})
结论
如果您是正确性和爱情类型系统的忠实拥护者(我就是其中之一),您可能会更喜欢React。它与TypeScript搭配使用效果更好,并且语言方法更纯正。
Vue具有全局名称空间(尽管您可以避免使用它),但是自定义事件,插件和mixins之类的功能具有JS的动态特性。
出于这个原因,我希望有许多工程师在大型代码库中的复杂应用中使用React。
如果您喜欢从HTML /静态内容开始并大量使用JavaScript的想法,那么您可能会喜欢Vue的模板方法。
对于不熟悉JavaScript的开发人员,Vue可能更容易上手。
模板是直观的,可以逐步采用。您无需考虑重新渲染,数据绑定很容易理解。
这并不是说您无法使用Vue构建复杂的应用程序。如果您花费大量时间在JavaScript上,您可能会喜欢React的更纯净的语言方法。
最后,很难忽视React的大规模采用和庞大的生态系统。对于公司而言,React是风险较小的选择。
具有React经验的工程师要多于Vue的经验。招聘可能会更容易。此外,还有更多其他的React渲染目标(如React Native)可能会有用。
归根结底,您可以同时使用两个框架。我个人仍然更喜欢React,但我不能说它绝对更好。
refs
https://bypaulshen.com/posts/comparing-vue-and-react/
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
React vs Vue in 2020的更多相关文章
- React 还是 Vue: 你应该选择哪一个Web前端框架?
学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue 如果你喜欢简单和“能用就行”的东西 ...
- Angular React 和 Vue的比较
Angular(1&2),React,Vue对比 一 数据流 数据绑定 Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面. 实现原理: $scope变量中 ...
- react构建淘票票webapp,及react与vue的简单比较。
前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
- 前端框架:react还是vue?
之前写了一篇前端框架的大汇总,主要介绍了当下主流的框架和其特性.最近除了bootstrap,就属react和vue最为热门,这篇就主要拿这两个框架来做一下详细对比. 究竟如何正确使用?作为小白的我们从 ...
- Jerry的碎碎念:SAPUI5, Angular, React和Vue
去年我去一个国内客户现场时,曾经和他们IT部门的一位架构师聊到关于在SAP平台上进行UI应用的二次开发时,UI框架是选用UI5还是Vue这个话题. 我们代表SAP, 向客户推荐使用UI5是基于以下六点 ...
- react VS vue 我们究竟该如何选择(从项目的角度帮你分析)
一.序言 现在web开发最火的两个框架,react和vue.听起来就感觉很牛逼的样子.确实,不得不服,创造出这2种框架的人真的是牛逼.不过更牛逼的是为这2中框架不断完善的人.一个优秀的idea,会在很 ...
- 技术趋势:React vs Vue vs Angular
React.Vue 和 Angular 这两年发展状况如何?2019 年哪个技术最值得学习? 前几天 Medium 上有一位作者发表了一篇关于 React.Vue 和 Angular 技术趋势的文章( ...
- 三大前端框架(react、vue、angular2+)父子组件通信总结
公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...
- 简述react与vue的区别
React 和Vue是现在主流的两个框架(相对来说angular用的已经少了) 两者的区别体现在以下方面 相同点: 1.react和vue都支持服务端渲染 2.都有虚拟DOM,组件化开发,通过prop ...
随机推荐
- OSS与文件系统的对比 文件存储 块存储 对象存储
基本概念介绍_开发指南_对象存储 OSS-阿里云 https://help.aliyun.com/document_detail/31827.html 强一致性 Object 操作在 OSS 上具有 ...
- 常见JVM面试题及答案整理
常见JVM面试题及答案整理 1.什么情况下会发生栈内存溢出 2.JVM内存模型 3.JVM内存为什么要分成新生代,老年代,持久代.新生代中为什么要分为Eden和Survivor. 3.1共享内存区划分 ...
- linux yum rpm 和 apt-get dpkg 安装、卸载软件
一般来说著名的linux系统基本上分两大类: 1.RedHat系列:Redhat.Centos.Fedora等 2.Debian系列:Debian.Ubuntu等 RedHat 系列 ...
- springboot源码解析-管中窥豹系列之web服务器(七)
一.前言 Springboot源码解析是一件大工程,逐行逐句的去研究代码,会很枯燥,也不容易坚持下去. 我们不追求大而全,而是试着每次去研究一个小知识点,最终聚沙成塔,这就是我们的springboot ...
- HarmonyOS应用开发-Component体系介绍(一)
目录: 1. Component的内部类/接口 2. Component方法简介 3.总结 在HarmonyOS的UI框架中,Component为用户界面提供基本组件,Component类位于ohos ...
- CF-1354 E. Graph Coloring(二分图,背包,背包方案输出)
E. Graph Coloring 链接 n个点m条边的无向图,不保证联通,给每个点标号1,2,3.1号点个数n1,2号点个数n2,3号点个数n3.且每条边的两点,标号之差绝对值为1.如果有合法方案, ...
- 2020 CCPC Wannafly Winter Camp Day1 C. 染色图
2020 CCPC Wannafly Winter Camp Day1 C. 染色图 定义一张无向图 G=⟨V,E⟩ 是 k 可染色的当且仅当存在函数 f:V↦{1,2,⋯,k} 满足对于 G 中的任 ...
- HDU6331 Problem M. Walking Plan【Floyd + 矩阵 + 分块】
HDU6331 Problem M. Walking Plan 题意: 给出一张有\(N\)个点的有向图,有\(q\)次询问,每次询问从\(s\)到\(t\)且最少走\(k\)条边的最短路径是多少 \ ...
- zjnu1757Excellent (数学公式)
Description Let us begin with a positive integer N and find the smallest positive integer which does ...
- 【poj 1984】&【bzoj 3362】Navigation Nightmare(图论--带权并查集)
题意:平面上给出N个点,知道M个关于点X在点Y的正东/西/南/北方向的距离.问在刚给出一定关系之后其中2点的曼哈顿距离((x1,y1)与(x2,y2):l x1-x2 l+l y1-y2 l),未知则 ...